jQuery 使用jquery计算表中<tr>的数量

Count number of <tr> in table using jquery

提问by woninana

I just want to count the number of rows,

我只想计算行数，

   <button id="add">Add row</button>
<table>
    <tbody id="mytbody">
    </tbody>
</table>
Number of rows: <span id="counter"></span>

Javascript:

Javascript：

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

I found this jQuery: count number of rows in a table

我发现了这个jQuery: count number of rows in a table

and this doesn't works http://jsfiddle.net/H8sBr/

这不起作用http://jsfiddle.net/H8sBr/

I just don't get it working. help?

我只是不明白它的工作。帮助？

回答by Praveen Kumar Purushothaman

The script is wrong, use append():

脚本错误，使用append()：

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

Demo: http://jsfiddle.net/praveenscience/H8sBr/115/

演示：http: //jsfiddle.net/praveenscience/H8sBr/115/

回答by Kaf

To get the trcountusing pure js;

使用纯js获取tr计数；

var count = document.getElementById("mytbody").getElementsByTagName("tr").length;

JS Fiddle Demo

JS小提琴演示

回答by Aman Agarwal

since you are using after(), your code is adding the tr after the #mytbody,

由于您使用 after()，您的代码在 #mytbody 之后添加了 tr，

<button id="add">Add row</button>
<table>
    <tbody id="mytbody">
    </tbody>
    <tr>Tue Feb 26 2013 23:41:09 GMT+0530 (India Standard Time)</tr>
    <tr>Tue Feb 26 2013 23:41:09 GMT+0530 (India Standard Time)</tr>   
</table>

so when you executing your code

所以当你执行你的代码时

$('#mytbody').children().length;

it always return you 0.

它总是返回 0。

so instead of after() try to use append() http://forum.jquery.com/topic/after-vs-append

所以代替 after() 尝试使用 append() http://forum.jquery.com/topic/after-vs-append

http://jsfiddle.net/H8sBr/118/

http://jsfiddle.net/H8sBr/118/

回答by Anup Khandelwal

Rectified your JS code. http://jsfiddle.net/HwEA7/

修正你的 JS 代码。http://jsfiddle.net/HwEA7/

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

1. Use appendto add row after <tbody>
2. Count number of row as $('#mytbody tr').length

1. 用于append在后面添加行<tbody>
2. 计算行数为 $('#mytbody tr').length

回答by jAndy

You don't .append()new <tr>nodes, you're inserting them afterthe table body. Use

你不.append()新的<tr>节点，你把它们插入后的表身。用

$('#mytbody').append('<tr><td>'+ new Date() +'</td></tr>');

instead.

反而。

回答by Silent Byte

Try this:

尝试这个：

    $('#add').click(function() {
        $('#mytbody').append('<tr><td>'+ new Date() +'</td></tr>');
        var count = $('#mytbody > TR').length;
        $('#counter').html(count);
    });

回答by j08691

Try this jsFiddle example.

试试这个jsFiddle 示例。

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

You can use simply $('#mytbody tr').lengthbut you must also use appendinstead of after.

您可以简单地使用，$('#mytbody tr').length但也必须使用append代替after。