I have a table like this.

<table id='table1'>
</table>

and in this table i am dynamically adding rows to the table using jquery like below.

var tbl = $("#table1");
tbl.append('<tr></tr><tr></tr><tr></tr>');

I can add class to the appended rows using 2 methods like below
case 1

tbl.find('tr').eq(0).addClass("test");
tbl.find('tr').eq(1).addClass("test");

or case 2

for (var i=0;i<tbl.find('tr').length;i++) {
    tbl.find('tr').eq(i).addClass("test")
}

and my question is there any way i can add same classname to the dynamically appended rows. Answers expecting in jquery. Thanks in advance.

I have a table like this.

<table id='table1'>
</table>

and in this table i am dynamically adding rows to the table using jquery like below.

var tbl = $("#table1");
tbl.append('<tr></tr><tr></tr><tr></tr>');

I can add class to the appended rows using 2 methods like below
case 1

tbl.find('tr').eq(0).addClass("test");
tbl.find('tr').eq(1).addClass("test");

or case 2

for (var i=0;i<tbl.find('tr').length;i++) {
    tbl.find('tr').eq(i).addClass("test")
}

and my question is there any way i can add same classname to the dynamically appended rows. Answers expecting in jquery. Thanks in advance.

• javascript
• jquery

Share Improve this question Follow asked Aug 17, 2015 at 15:40 htonivhtoniv 1,6682323 silver badges4242 bronze badges 2

• 1 Best would be if you could append the elements with their corresponding classes. It would be a small performance enhacement: tbl.append('<tr class="test"> ...') – Raulucco Commented Aug 17, 2015 at 15:43
• @Frogmouth yeah but if it is n number of rows i have to add classnames to each rows manually – htoniv Commented Aug 17, 2015 at 15:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Once an element is added to the DOM, you have no way of telling if it was dynamically added or not unless you have custom code that does such. I would suggest changing .append to .appendTo so you have access to the rows you're adding and can call .addClass:

var tbl = $("#table1");
$('<tr></tr><tr></tr><tr></tr>').appendTo(tbl).addClass("test")

You could also put the class in the string then append it or modify it (add a class) prior to appending it. Note how I only have one tr in my string but append it multiple times (optionally adding a class as noted)

var tbl = $("#table1");
var tr = '<tr class="test"></tr>';
var td = '<td class="test">new data</td>';

//var addedrow = $(tr).append(td).addClass("newclass");//adds class to the row
var addedrow = $(tr).append(td);//create new row object
addedrow.find('td').addClass("newclass"); //adds class to the td in the new row
var ar2 = $(tr).append(td);
var ar3 = $(tr).append(td);
tbl.append(addedrow, [ar2, ar3]); // appends the new rows
tbl.find('tr').last(td).addClass("newclass");//add class to last rows td

see it in action here: http://jsfiddle/MarkSchultheiss/0osLfef3/