如何使用 jQuery 计算动态添加的表行数？
如何计算使用 jQuery 动态添加的表行数？
我尝试过使用 $('#mytbody').children().length; 但它不适用于动态添加的行。
这是我的代码，也可在 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>
How can I count the table rows that is added dynamically with jQuery?
I have tried with $('#mytbody').children().length; but it doesn't work with rows that are added dynamically.
Here is my code, also runnable in 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
http://jsfiddle.net/H8sBr/2/
您需要使用
.append( )而不是.after()。 After 在你的 tbody 之后添加一个元素，但你计算 tbody 内的元素。如果使用追加，则将它们添加到 tbody 的末尾。或者，您可以使用.prepend()在表格顶部添加条目。PS：这是一个常见的误解，因为 css 选择器
.after()在所选元素的内容之后添加内容，而不是在该元素之后。http://jsfiddle.net/H8sBr/2/
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.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.您正在 tbody 之外添加行。
将
after更改为prepend即可。
或者将 count 更改为
var count = $('table tr').length;http://jsfiddle.net/H8sBr/442/
You are adding rows outside of tbody.
Change
aftertoprependwill work..
or change count to
var count = $('table tr').length;http://jsfiddle.net/H8sBr/442/
尝试将计数更改为
这似乎有效 - 不知道为什么对 tbody 进行操作不起作用。
编辑： jsFiddle
Try altering count to
This seems to work - not sure why acting on the tbody doesn't.
Edit: jsFiddle
只需使用计数器，它的 dom 查找就会更少 ：
Just use a counter,it has less dom lookups :
看起来 jQuery 中存在一些错误（不确定）；如果动态添加表行，则行长度不会更新。
如果动态添加行，将不会返回正确的计数。
简单的解决方案是使用：
是的，您可以将 jQuery 与 javascript 结合使用。
It looks there is some bug (not sure) in jQuery; row length is not getting updated if you add table row dynamically.
will not return correct count if you add row dynamically.
Simple solution is to use:
Yes, you can use jQuery with javascript.