Question

如何计算使用jQuery动态添加的表行？

我尝试使用$('#mytbody').children().length;，但它不适用于动态添加的行。

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.6.2.min.js">
<script>
$(function() {
    $('#add').bind('click', function() {
        $('#mytbody').after('<tr><td>'+ new Date() +'</td></tr>');
        var count = $('#mytbody').children().length;
        $('#counter').html(count);
    });
});
</script>
</head>
<body>
<button id="add">Add row</button>
<table>
    <tbody id="mytbody">
    </tbody>
</table>
Number of rows: <span id="counter"></span>
</body>
</html>

Answer 1

http://jsfiddle.net/H8sBr/2/

您需要使用.append()而不是.after()。添加一个元素后你的tbody但你计算你的tbody内的元素。如果使用append，则在tbody的末尾添加它们。或者，您可以使用.prepend()在表格顶部添加条目。

PS：这是一个共同的误解，因为css选择器.after()在所选元素的内容之后而不是在元素之后添加内容。

Answer 2

尝试将计数更改为

var count = $('table tr').length;

这似乎有效 - 不确定为什么对tbody采取行动不会。

修改：jsFiddle

Answer 3

您要在tbody之外添加行。

将after更改为prepend

会工作..

或将计数更改为var count = $('table tr').length;

http://jsfiddle.net/H8sBr/442/

Answer 4

Just use a counter,it has less dom lookups ：

$(function() {
    $('#counter').html(0);
    var count = 1;
    $('#add').bind('click', function() {
        $('#mytbody').after('<tr><td>'+ new Date() +'</td></tr>');
        $('#counter').html(count);
        count++
    });
});

Answer 5

看起来jQuery中有一些bug（不确定）;如果动态添加表行，则行长度不会更新。

var rowCount = $("#tableId > tbody > tr").length;

如果动态添加行，

将不会返回正确的计数。

简单的解决方案是使用：

var rowCount = document.getElementById("tableId").rows.length;

是的，您可以在javascript中使用jQuery。

如何用jQuery计算动态添加的表行？

5 个答案: