Adding rows dynamically to table using for loop in jQuery

Question

I want to use jQuery 1.3.2 in an html file and create a dynamic table. For this, I create the first row, then create a for loop running 10 times and in each iteration, I select the last row of the table and use after() to add a new row after it. This new row contains the value of the counter of my for loop.

code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document</title>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript">

    $("document").ready(function() {
        for (var i = 0; i < 11; i += 1) {
            var newItem = $("<tr><td>"i"</td></tr>");
            $("#table1 tr:last").after(newItem.html());
        }
    });

</script>

</head>
<body>
<table id="table1">
    <tr>
    <td>row 1 col 1</td>
    </tr>
</table>
</body>
</html>

The problem is, only the first row that was created in <table></table> is displayed. Please help out.

Vlad Nicula · Accepted Answer · 2012-02-04 06:36:36Z

6

$("#table1 tr:last")

selects the last row. It's a bit more expensive in terms of processing needed compared to

$("#table1")

which selects just the entire table.

$("#table1 tr:last").after(...)

is expensive again, because after you selected the last row, you take one step back, get back to the parent of tr:last and try to append something.

Why not try appending table rows as children of table like this?

var row = $("<tr><td>"i"</td></tr>");
$("#table1").append(row);

Append will always add at the end of the children of table1. This should be faster. Take a look at append in the jQuery documentation.

answered Feb 4, 2012 at 6:36

Vlad Nicula

3,7366 gold badges37 silver badges55 bronze badges

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

Comments

jwchang · Accepted Answer · 2012-02-04 07:05:30Z

4

for (var i = 0; i < 11; i += 1) {
    $("#table1").append("<tr><td>" + i + "</td></tr>");
}

Here is my code

answered Feb 4, 2012 at 7:05

jwchang

10.9k15 gold badges62 silver badges89 bronze badges

Comments

dfsq · Accepted Answer · 2012-02-04 06:21:31Z

0

Try this way:

var newItem = "<tr><td>" + i + "</td></tr>"; 
$("#table1 tr:last").after(newItem);

answered Feb 4, 2012 at 6:21

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Adding rows dynamically to table using for loop in jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related