使用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 number of rows in a table

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

我只是觉得它不起作用。 帮助

Answer 1

脚本错误，请使用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/

Answer 2

使用纯js获取tr 计数;

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

JS Fiddle Demo

Answer 3

因为你正在使用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/

Answer 4

您没有.append()个新的<tr>个节点，而是在表体后插入。使用

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

代替。

Answer 5

试试这个：

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

Answer 6

试试这个jsFiddle example。

$('#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。

Answer 7

纠正你的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. 使用append在<tbody>
之后添加行
2. 将行数计为$('#mytbody tr').length