Xun Yin Xun Yin - 6 months ago 13
jQuery Question

How to get the index of button in function when I click button?

<button class="btn btn-warning delCartItem" onclick="delCartItem(3)">
Delete
</button>
<button class="btn btn-warning delCartItem" onclick="delCartItem(3)">
Delete
</button>
...so on


I'm making the button which can delete the shopping cart item.

And the parameter of
delCartItem()
is product id.

How to get the index of button when I click one of the button in
delCartItem()
function?


Supplement:


This is my purpose:

When I click the button => get the index of button
=> use
$('.item_price').eq(idx).text()
get the price of shopping cart item

<thead>
<tr>
<th>
<h3><strong> 項目 </strong></h3></th>
<th>
<h3><strong> 商品編號 </strong></h3></th>
<th>
<h3><strong> 商品名稱 </strong></h3></th>
<th>
<h3><strong> 存貨量 </strong></h3></th>
<th>
<h3><strong> 原價 </strong></h3></th>
<th>
<h3><strong> 數量 </strong></h3></th>
<th>
<h3><strong> 小計 </strong></h3></th>
<th>
<h3><strong> 操作 </strong></h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>用mBlock玩Arduino - Starting from Scratch</td>
<td>0</td>
<td class="item_price">300</td>
<td>
<select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
</td>
<td class="item_total_price">300</td>
<td>
<button class="btn btn-warning delCartItem" id='item1' onclick="delCartItem(this.id, 2)"> <i class="fa fa-times-circle"></i> 刪除 </button>
</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>深入淺出程式設計</td>
<td>9</td>
<td class="item_price">578</td>
<td>
<select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
</td>
<td class="item_total_price">578</td>
<td>
<button class="btn btn-warning delCartItem" id='item0' onclick="delCartItem(this.id, 1)"> <i class="fa fa-times-circle"></i> 刪除 </button>
</td>
</tr>
</tbody>

Answer

[edited]

This should work.

$(".delCartItem").on("click", function(){
  
  var $tr = $(this).closest("tr");
  
  var price = $tr.find(".item_price").text();
  var id = $(this).attr('id');
  
  var index = $("tr", $tr.closest("table")).index($tr) 
  
  alert("clicked btn in rom: "+ index);
  
  //delCartItem(index);

});





function delCartItem(i){
  //alert("deleting item "+i);
  return;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table>
<thead>
<tr>
    <th>
        <h3><strong> 項目 </strong></h3></th>
    <th>
        <h3><strong> 商品編號 </strong></h3></th>
    <th>
        <h3><strong> 商品名稱 </strong></h3></th>
    <th>
        <h3><strong> 存貨量 </strong></h3></th>
    <th>
        <h3><strong> 原價 </strong></h3></th>
    <th>
        <h3><strong> 數量 </strong></h3></th>
    <th>
        <h3><strong> 小計 </strong></h3></th>
    <th>
        <h3><strong> 操作 </strong></h3></th>
</tr>
</thead>
<tbody>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>用mBlock玩Arduino - Starting from Scratch</td>
        <td>0</td>
        <td class="item_price">300</td>
        <td>
            <select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
        </td>
        <td class="item_total_price">300</td>
        <td>
            <button class="btn btn-warning delCartItem" id='item1' onclick="delCartItem(this.id, 2)"> <i class="fa fa-times-circle"></i> 刪除 </button>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>深入淺出程式設計</td>
        <td>9</td>
        <td class="item_price">578</td>
        <td>
            <select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
        </td>
        <td class="item_total_price">578</td>
        <td>
            <button class="btn btn-warning delCartItem" id='item0' onclick="delCartItem(this.id, 1)"> <i class="fa fa-times-circle"></i> 刪除 </button>
        </td>
    </tr>
</tbody>
</table>

Comments