Count number of in table using jquery

Question

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:

$(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

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

I just don't get it working. help?

Check this. http://jsfiddle.net/praveenscience/H8sBr/115/ Your code is wrong. You should use `append` instead of `after`. — Praveen Kumar Purushothaman, Feb 26 '13 at 17:48

score 12 · Accepted Answer · answered Feb 26 '13 at 17:45

The script is wrong, use 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/

Kaf · Answer 2 · 2013-02-26T18:20:22.897

8

To get the tr count using pure js;

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

JS Fiddle Demo

edited Feb 26 '13 at 18:20

answered Feb 26 '13 at 17:47

Kaf

32,033
7
53
77

Any reason for down vote? – Kaf Feb 26 '13 at 17:55
The script is wrong. :) I will remove the downvote once you correct your answer. – Praveen Kumar Purushothaman Feb 26 '13 at 17:56
@PraveenKumar, i don't get it. What is wrong? – Kaf Feb 26 '13 at 18:06
The question is wrong. The script in the question is wrong. See mine and others answers. :) – Praveen Kumar Purushothaman Feb 26 '13 at 18:07
My answer is clear, it is giving a count of `tr` Check this [demo](http://jsfiddle.net/H8sBr/117/) – Kaf Feb 26 '13 at 18:10
Well, although the answer is right, this doesn't exactly solve the problem. Does it? – Praveen Kumar Purushothaman Feb 26 '13 at 18:10
I don't wanna argue. I also don't like to downvote people. Correct your answer. I have removed the downvote. :) Your answer doesn't answer the question. – Praveen Kumar Purushothaman Feb 26 '13 at 18:11
@PraveenKumar, there is no reason you to down vote. There is nothing wrong, count is correct using pure js. and there is nothing to :) either. – Kaf Feb 26 '13 at 18:13
1

I can say "Sun rises in the east". It is right. Will you downvote? Same reason! – Praveen Kumar Purushothaman Feb 26 '13 at 18:15
@PraveenKumar, that is irrelevant. This is your [fiddle](http://jsfiddle.net/praveenscience/H8sBr/115/) with my counter. – Kaf Feb 26 '13 at 18:19
Your counter? I don't get you... – Praveen Kumar Purushothaman Feb 26 '13 at 18:19
@PraveenKumar, counter is the script which counts trs. – Kaf Feb 26 '13 at 18:21
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25170/discussion-between-praveen-kumar-and-kaf) – Praveen Kumar Purushothaman Feb 26 '13 at 18:21
Same way, your answer is irrelevant... – Praveen Kumar Purushothaman Feb 26 '13 at 18:22
@PraveenKumar, how could you decide that. check my fiddle demo in the answer, his problem was counting the trs, and I have given a correct way to count with pure js. I don't understand reason behind your argument. – Kaf Feb 26 '13 at 18:24
The OP's script is wrong. He is using `after()` instead of `append()`. Now do you get it? – Praveen Kumar Purushothaman Feb 26 '13 at 18:31
Your fiddle is right man. :) Just saw it. But please mention in your answer about the `append()` stuff... `+1` for you... – Praveen Kumar Purushothaman Feb 26 '13 at 18:33

score 1 · Answer 3 · answered Feb 26 '13 at 17:46

Try this jsFiddle example.

$('#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').length but you must also use append instead of after.

Aman Agarwal · Answer 4 · 2013-02-26T18:19:54.570

1

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

<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.

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

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

edited Feb 26 '13 at 18:19

answered Feb 26 '13 at 17:55

Aman Agarwal

719
6
15

Actually, not right, but works. So removed the downvote. – Praveen Kumar Purushothaman Feb 26 '13 at 18:08

score 0 · Answer 5 · answered Feb 26 '13 at 17:45

0

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

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

instead.

answered Feb 26 '13 at 17:45

jAndy

223,102
54
301
354

score 0 · Answer 6 · answered Feb 26 '13 at 17:46

0

Try this:

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

answered Feb 26 '13 at 17:46

Silent Byte

190
1
11

Anup Khandelwal · Answer 7 · 2013-02-26T18:00:53.870

0

Rectified your JS code. 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);
    });
});

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

edited Feb 26 '13 at 18:00

answered Feb 26 '13 at 17:57

Anup Khandelwal

365
2
6
23

Count number of in table using jquery

7 Answers7

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