javascript - 使用jquery计算表中的数量

Question

我只想计算行数，

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

Javascript：

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

我找到了这个jQuery: count of rows in a table

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

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

score 12 · Accepted Answer

脚本错误，使用append()：

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

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

score 8 · Accepted Answer

使用纯js获取tr 计数；

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

JS 小提琴演示

score 1 · Accepted Answer

由于您使用的是 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>

所以当你执行你的代码时

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

它总是返回 0。

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

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

score 0 · Accepted Answer

您不是.append()新节点，而是在表体之后<tr>插入它们。采用

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

反而。

score 0 · Accepted Answer

试试这个：

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

score 0 · Accepted Answer

试试这个jsFiddle 示例。

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

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

score 0 · Accepted Answer

更正了您的 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);
    });
});

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

javascript - 使用jquery计算表中的数量

7 回答 7

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

Related

Reference