我想获得第一列行的值在eack href中单击HTML表
我想要获得每行第一列的值href单击编辑。例如,如果我点击第一行href,那么我应该得到第一列值的警报。我想获得第一列行的值在eack href中单击HTML表
$(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>
检查了这一点。
这工作完全
$(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><button class="delete" data-key="' + (key + 1) + '"><a href="#menu1">Edit</a></button></td>';
tr += '</tr>';
$('tbody').append(tr);
});
$('tbody .delete a').click(function(){
alert($(this).closest('tr').find('td:first-child').text());
});
});
这里是更新的jsfiddle链接。一探究竟。 https://jsfiddle.net/86n7qkpe/
PLease提供JSFIDDLE为此.. –
添加jsfiddle链接,检查出来。 –
我从hmtl表中删除了第一列,然后我应该得到id,但它仍然给我1作为输出。但它应该给我的第一列行的价值 –
由于生成的HTML结构ň行是如下动态添加到<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()
使用click处理程序所提供的上下文的相应行的列:
$(document).ready(function(){
$('tbody').on('click', 'a', function(){
var value = $(this).closest('tr').find('td').first().text();
alert(value);
});
});
这里是一个jsfiddle演示功能。它演示了第一列被警告的值,以及通过单击事件执行事件<a>
点击显示动态/添加行。这是因为<a>
元素不是直接定位的,它们作为上下文提供给永久DOM元素,例如不会添加或删除的元素。
更新
如果你需要抓住其他列,你可以使用结构来eq()
抓住一个零(0)的索引jQuery的查询。例如,如果你需要第二列,你可以:
// 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();
希望这会有所帮助!
我正在页面加载创建动态表,所以这个代码将无法工作,我猜。 –
如何设置'on('click')'处理程序允许添加动态元素并附加事件侦听器。如果''是'on()'的目标,它将失败,但是定位''(或类似的永久性DOM元素)并提供''上下文,它会在添加更多项目时成功附加。我已经更新了jsfiddle,显示正在添加的新行以及正在成功执行的事件。谢谢! –
我不想添加行,但我从servlet和页面加载获取json我正在使用上面的代码动态地创建一个html表,现在我想单击行编辑中的第一列的行值。我怎么能得到每个efit href的价值单击请帮助.. –
只需将其添加到onclick属性... 我不按钮我点上面提到 –
@MJ ive回答你的老问题... –
$.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><button class="delete" data-key="' + (key + 1) + '" onclick="alert('+(key+1)+')"><a href="#menu1">Edit</a></button></td>';
tr += '</tr>';
$('tbody').append(tr);
});
$.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><button class="delete" data-key="' + (key + 1) + '" onclick="alert('+(key+1)+')"><a href="#menu1">Edit</a></button></td>';
tr += '</tr>';
$('tbody').append(tr);
});
只需将其添加到onclick属性...
我不按钮我点上面提到 –
@MJ ive回答你的老问题... –
在上表中,如果我点击第一行编辑href,那么它应该在alert框中打印id。我不想在按钮上点击只有href点击。 –
这不是[JSON](http://www.json.org/) - > [JSON和Object Literal Notation之间的区别是什么?](https://*.com/questions/2904131/what-is- json-and-object-literal-notation之间的差异) – Andreas
请检查我的更新代码,并请帮助获取每行href单击值。 –