按鈕使用 jQuery 從表行獲取數據

Question

我正在嘗試使用 jQuery 從表行中獲取數據。 我試圖得到“b17dcat126”，但它沒有返回。

 function updatedata() { var tr = $(this).parents("tr"); var id = tr.find('.id').text(); alert(id); }

 <tbody id="list"> <tr class='row'> <td class='id'>b17dcat126</td> <td class='name'>Nguyễn Nhật Minh</td> <td class='phone'>010313234</td> <td class='sex'>Nam</td> <td> <button class='btn btn-danger' onclick='deletefunc(15)' data-id='15'>Xoá</button> <button class='btn btn-warning' data-toggle='modal' onclick='updatedata()' data-target='#update'>Sửa</button> </td> </tr> </tbody>

Answer 1

函數內的this關鍵字指的是全局對象。 你可以通過兩種方式解決這個問題。

1. 使用Jquery創建事件偵聽器。
2. 或者將this關鍵字作為函數參數傳遞。

第一種方法：

 $(document).ready(function() { $(".updateBtn").click(function() { var tr = $(this).parents("tr"); var id = tr.find('.id').text(); alert(id); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody id="list"> <tr class='row'> <td class='id'>b17dcat126</td> <td class='name'>Nguyễn Nhật Minh</td> <td class='phone'>010313234</td> <td class='sex'>Nam</td> <td> <button class='btn btn-warning updateBtn' data-toggle='modal' data-target='#update'>Sửa</button> </td> </tr> </tbody> </table>

第二種方法：

 function updatedata(current) { var tr = $(current).parents("tr"); var id = tr.find('.id').text(); alert(id); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody id="list"> <tr class='row'> <td class='id'>b17dcat126</td> <td class='name'>Nguyễn Nhật Minh</td> <td class='phone'>010313234</td> <td class='sex'>Nam</td> <td> <button class='btn btn-warning' data-toggle='modal' onclick='updatedata(this)' data-target='#update'>Sửa</button> </td> </tr> </tbody> </table>

Answer 2

1.您正在使用 jQuery，因此您可以過多地簡化您的代碼。 從按鈕中刪除onclick並直接執行：

$('.btn-warning').click(function(){
  var id = $(this).closest('tr').find('.id').text();  
  alert(id);
});

工作片段：

 $('.btn-warning').click(function() { var ids = $(this).closest('tr').find('.id').text(); alert(ids); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody id="list"> <tr class='row'> <td class='id'>b17dcat126</td> <td class='name'>Nguyễn Nhật Minh</td> <td class='phone'>010313234</td> <td class='sex'>Nam</td> <td> <button class='btn btn-warning' data-toggle='modal' data-target='#update'>Sửa</button> </td> </tr> </tbody> </table>

2.如果您將按鈕對象傳遞給函數，您的代碼也能正常工作：

工作片段：

 function updatedata(element) { var id = $(element).closest("tr").find('.id').text(); alert(id); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody id="list"> <tr class='row'> <td class='id'>b17dcat126</td> <td class='name'>Nguyễn Nhật Minh</td> <td class='phone'>010313234</td> <td class='sex'>Nam</td> <td> <button class='btn btn-warning' data-toggle='modal' onclick='updatedata(this)' data-target='#update'>Sửa</button> </td> </tr> </tbody> </table>

Answer 3

將事件對象作為函數參數傳遞來解決這個問題。

在 HTML 中，

<button class='btn btn-warning' data-toggle='modal' onclick='updatedata(event)' data-target='#update'>Sửa</button>

function updatedata(e) {     
  alert($(e.target).parents('tr').find('td.id').text());
}