如何使用 jQuery 计算动态添加的表行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7595645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to count dynamically added table rows with jQuery?
提问by Jonas
How can I count the table rows that is added dynamically with jQuery?
如何计算使用 jQuery 动态添加的表行？
I have tried with $('#mytbody').children().length;but it doesn't work with rows that are added dynamically.
我尝试过，$('#mytbody').children().length;但它不适用于动态添加的行。
Here is my code, also runnable in JsFiddle
这是我的代码，也可以在 JsFiddle 中运行
<!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>
采纳答案by sankar.suda
You are adding rows outside of tbody.
您正在 tbody 之外添加行。
Change afterto prepend
更改after为prepend
will work..
将工作..
or change count to var count = $('table tr').length;
或将计数更改为 var count = $('table tr').length;
回答by meo
you need to use .append()not .after(). After adds a element After your tbody but you count elements Inside your tbody. If you use append, you add them at the end of the tbody. Alternately you could use .prepend()to add entries on top of the table.
你需要使用.append()not .after()。在您的 tbody 之后添加一个元素，但您计算 tbody 内的元素。如果使用 append，则将它们添加到 tbody 的末尾。或者，您可以使用.prepend()在表格顶部添加条目。
PS: This is a commun misconception because of the css selector .after()that adds content after the content of the selected element not after the element.
PS：这是一个常见的误解，因为 css 选择器.after()在所选元素的内容之后而不是在元素之后添加内容。
回答by whostolemyhat
回答by NimChimpsky
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++
});
});
回答by Girish Kumar
It looks there is some bug (not sure) in jQuery; row length is not getting updated if you add table row dynamically.
看起来 jQuery 中存在一些错误（不确定）；如果动态添加表行，行长度不会更新。
var rowCount = $("#tableId > tbody > tr").length;
will not return correct count if you add row dynamically.
如果动态添加行，则不会返回正确的计数。
Simple solution is to use:
简单的解决方案是使用：
var rowCount = document.getElementById("tableId").rows.length;
Yes, you can use jQuery with javascript.
是的，您可以将 jQuery 与 javascript 一起使用。
