我正在尝试使用jQuery从表行中获取数据。我正在尝试获取“ b17dcat126”，但没有返回任何内容。
void Linked_list::sort_ascending(){
Node *h = head->next;
merge_sort(&h);
}
function updatedata() {
var tr = $(this).parents("tr");
var id = tr.find('.id').text();
alert(id);
}
按钮使用jQuery从表行获取数据
•
问答
nongdada123456 回答：按钮使用jQuery从表行获取数据
函数内部的this关键字引用了全局对象。
您可以通过两种方法解决此问题。
- 使用
Jquery创建事件监听器。 - 或将
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>,
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>,
通过将事件对象作为函数参数来解决此问题。
在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());
}