我想获取每行 href 单击 EDIT 上的第一列行值。例如,如果我单击第一行 href,那么我应该收到其第一列行值的警报。
$(document).ready(function () {
var jsonData = [{
id: 'A01',
name: 'Fadhly'
}, {
id: 'A02',
name: 'Permata'
}, {
id: 'A03',
name: 'Haura'
}, {
id: 'A04',
name: 'Aira'
}];
$.each(jsonData, function (key, val) {
var tr = '<tr>';
tr += '<td>' + (key + 1) + '</td>';
tr += '<td>' + val.id + '</td>';
tr += '<td>' + val.name + '</td>';
tr += '<td><a href="#menu1">Edit</a</td>';
tr += '</tr>';
$('tbody').append(tr);
});
我的 HTML 代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" width="100%">
<thead>
<tr>
<th>#</th>
<th>Id</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
最佳答案
给定生成的 HTML 结构如下,其中 n 行动态添加到 <tbody>
:
<table border="1" width="100%">
<thead>
<tr>
<th>#</th>
<th>Id</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>
<a>Edit</a>
</td>
</tr>
<tr><!-- n dynamically generated rows --></tr>
</tbody>
</table>
您可以使用以下 jQuery 来执行 alert()
使用提供上下文的点击处理程序在相应行的第一列中显示文本:
$(document).ready(function(){
$('tbody').on('click', 'a', function(){
var value = $(this).closest('tr').find('td').first().text();
alert(value);
});
});
这是一个jsfiddle演示功能。它演示了被警报的第一列的值,并通过在 <a>
上执行事件的单击事件显示动态/添加的行。点击。这是因为<a>
元素不是直接定位的,它们作为永久 DOM 元素的上下文提供,例如不会添加或删除的元素。
更新
如果您需要获取其他列,您可以使用 eq()
构建 jQuery 查询。获取基于零 (0) 的索引。例如,如果您需要第二列,您可以:
// first column
var value = $(this).closest('tr').find('td').eq(0).text();
// second column
var value = $(this).closest('tr').find('td').eq(1).text();
// third column
var value = $(this).closest('tr').find('td').eq(2).text();
希望有帮助!
关于javascript - 我想获取 HTML 表中每个 href 单击的第一列行的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42302060/