How to count dynamically added table rows with jQuery?

Question

How can I count the table rows that is added dynamically with jQuery?

I have tried with $('#mytbody').children().length; but it doesn't work with rows that are added dynamically.

Here is my code, also runnable in JsFiddle

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.6.2.min.js">
<script>
$(function() {
    $('#add').bind('click', function() {
        $('#mytbody').after('<tr><td>'+ new Date() +'</td></tr>');
        var count = $('#mytbody').children().length;
        $('#counter').html(count);
    });
});
</script>
</head>
<body>
<button id="add">Add row</button>
<table>
    <tbody id="mytbody">
    </tbody>
</table>
Number of rows: <span id="counter"></span>
</body>
</html>

meo · Accepted Answer · 2013-06-07 12:14:50Z

4

http://jsfiddle.net/H8sBr/2/

you need to use .append() not .after(). After adds a element After your tbody but you count elements Inside your tbody. If you use append, you add them at the end of the tbody. Alternately you could use .prepend() to add entries on top of the table.

PS: This is a commun misconception because of the css selector .after() that adds content after the content of the selected element not after the element.

edited Jun 7, 2013 at 12:14

answered Sep 29, 2011 at 10:13

meo

31.3k20 gold badges90 silver badges124 bronze badges

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

1 Comment

user2142708 Over a year ago

Hi @meo....thank a lot its working perfectly....I get solution for this with your help.

sankar.suda · Accepted Answer · 2014-07-02 07:39:34Z

3

You are adding rows outside of tbody.

Change after to prepend

will work..

or change count to var count = $('table tr').length;

http://jsfiddle.net/H8sBr/442/

edited Jul 2, 2014 at 7:39

answered Sep 29, 2011 at 10:06

sankar.suda

1,1574 gold badges14 silver badges26 bronze badges

3 Comments

Jonas Over a year ago

Thanks, changing after to prepend fixed my problem.

Zeeshan Over a year ago

This jsfiddle doesn't work. The number of rows is always shown as zero. I don't understand how was it chosen as answer! Solution by @meo works great.

user2142708 Over a year ago

Hi @sankar.suda....Jsfiddle doesn`t work.Let me know how to get this ?How to solve this....

whostolemyhat · Accepted Answer · 2011-09-29 10:04:39Z

3

Try altering count to

var count = $('table tr').length;

This seems to work - not sure why acting on the tbody doesn't.

Edit: jsFiddle

answered Sep 29, 2011 at 10:04

whostolemyhat

3,1194 gold badges36 silver badges50 bronze badges

Comments

NimChimpsky · Accepted Answer · 2011-09-29 10:12:10Z

1

Just use a counter,it has less dom lookups :

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

edited Sep 29, 2011 at 10:12

answered Sep 29, 2011 at 10:05

NimChimpsky

47.5k61 gold badges202 silver badges319 bronze badges

2 Comments

meo Over a year ago

this would be perfect if you set the counter to the length of the tr that are already there... Maybe there could be some

Jonas Over a year ago

This also works, but I prefer to not introduce another variable.

display-name-is-missing · Accepted Answer · 2014-02-06 20:07:36Z

0

It looks there is some bug (not sure) in jQuery; row length is not getting updated if you add table row dynamically.

var rowCount = $("#tableId > tbody > tr").length;

will not return correct count if you add row dynamically.

Simple solution is to use:

var rowCount = document.getElementById("tableId").rows.length;

Yes, you can use jQuery with javascript.

edited Feb 6, 2014 at 20:07

display-name-is-missing

4,4055 gold badges31 silver badges42 bronze badges

answered Jan 29, 2014 at 16:43

Girish Kumar

4505 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to count dynamically added table rows with jQuery?

5 Answers 5

1 Comment

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related