Insert new row in Table

Question

I have a problem where the :eq() does not accept the counter, n, to insert values to a new column to the table in the HTML.

$(document).ready(function() {  
    var $tablerow = $('table.table').find('tr');
    count = 0;

    $tablerow.each(function(index, value){
        count += 1;
        var $listitem = $(this);
        n = parseInt($listitem.index());
        var $newRow = $("<td>" + n + "</td>");
        $("table.table tr:eq(n)").append($newRow);
    });
});

HTML

<table class="table">
    <tr><td>First row</td></tr>
    <tr><td>second row</td></tr>
    <tr><td>third row</td></tr>
    <tr><td>fourth row</td></tr>
    <tr><td>fifth row</td></tr>
    <tr><td>sixth row</td></tr>
    <tr><td>seventh row</td></tr>
    <tr><td>eighth row</td></tr>
</table>

You don't need find. You just want an array of the TR's. `$('.table tr')` will grab those. But if you have more than one table with that class, beware (same goes for find mind you). ;-) — Greg Pettit, Mar 09 '12 at 05:45

score 1 · Accepted Answer · answered Mar 09 '12 at 05:43

1

Written as-is, you're doing nothing more than writing a literal character, 'n', into .eq() method. Try this:

$("table.table tr:eq(" + n + ")").append($newRow);

answered Mar 09 '12 at 05:43

Tieson T.

20,774
6
77
92

score 0 · Answer 2 · answered Mar 09 '12 at 05:44

0

May be try using it like previous line where you used qoutes $("table.table tr:eq(" + n + ")").append($newRow);

answered Mar 09 '12 at 05:44

supriya

108
6

charlietfl · Answer 3 · 2012-03-09T05:51:39.153

0

No need to index this inside $.each since as your arguments show the first one is index.

 $(document).ready(function() {  
    var $tablerow = $('table.table tr');

    $tablerow.each(function(index,element){
       /* "this" is current row*/
         $(this).append("<td>" + index+1 + "</td>" )
    });
});

edited Mar 09 '12 at 05:51

answered Mar 09 '12 at 05:46

charlietfl

170,828
13
121
150

Code is shorter, but result is different from what I wanted. – Isoubb Mar 10 '12 at 08:43

score 0 · Answer 4 · answered Mar 09 '12 at 05:56

0

Replace

 var $newRow = $("<td>" + n + "</td>");
 $("table.table tr:eq(n)").append($newRow);`

with

var $newRow = $("<td>" + (n+1) + "</td>");
$("table.table tr:eq(" + n + ")").append($newRow);

This will work

answered Mar 09 '12 at 05:56

Sara

14,098
13
34
50

Insert new row in Table

4 Answers4

Linked