1

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?

Improve this question
3
  • Check this. jsfiddle.net/praveenscience/H8sBr/115 Your code is wrong. You should use append instead of after. Commented Feb 26, 2013 at 17:48
  • 1
    Title is bit confusing for the post Commented Feb 26, 2013 at 17:57
  • I fix my answer, please have a look Commented Feb 26, 2013 at 18:08

7 Answers 7

Reset to default
12

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

8

To get the tr count using pure js;

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

JS Fiddle Demo

Improve this answer

17 Comments

Any reason for down vote?
The script is wrong. :) I will remove the downvote once you correct your answer.
@PraveenKumar, i don't get it. What is wrong?
The question is wrong. The script in the question is wrong. See mine and others answers. :)
I can say "Sun rises in the east". It is right. Will you downvote? Same reason!
|
1

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.

Improve this answer

Comments

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/

Improve this answer

1 Comment

Actually, not right, but works. So removed the downvote.
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.

Improve this answer

Comments

0

Try this:

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

Comments

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);
    });
});
  1. Use append to add row after <tbody>
  2. Count number of row as $('#mytbody tr').length
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.