Question

我创建了一个包含三行的表，可以使用添加按钮进行扩展。我想知道我点击的每一行的索引。我有一段代码可以在三个自动生成的行上正常工作，但不能在我使用添加按钮添加的行上运行。

这是一个小提琴基本上显示我的问题：http://jsfiddle.net/4wa5kfpz/，我的实际代码中有更多的东西，所以这是一个基本/剥离版本。

正如您所看到的，在前两个和最后一个之间添加的行在单击时不响应。我尝试过类似的事情（见下文，基于this question）将click事件添加到表行，但这不起作用。

$("table tr").on('click', '#myTable tr', function(e){
    alert('Clicked row '+ ($(this).index()+1) );
});

有什么想法吗？

Answer 1

使用.on事件：

$("#myTable").on('click', 'tr', function(){
      alert('Clicked row '+ ($(this).index()+1) );
});

http://jsfiddle.net/4wa5kfpz/1/

Answer 2

你可以这样做：

<html>
<head>
<title>Row indexes</title>
<script type="text/javascript">
onload = function() {
    if (!document.getElementsByTagName || !document.createTextNode) return;
    var rows = document.getElementById('my_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function() {
            alert(this.rowIndex + 1);
        }
    }
}
</script>
</head>
<body>
<table id="my_table">
<tbody>
    <tr><td>first row</td></tr>
    <tr><td>second row</td></tr>
</tbody>
</table>
</body>
</html>

或者你可以这样做：

$('#thetable').find('tr').click( function(){
  alert('You clicked row '+ ($(this).index()+1) );
});

希望这会对你有帮助!!!

获取动态创建的单击行的索引

2 个答案: