Add current row into table

Question

i have this structure of html table:

    <table id="test">
     <thead>
       <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
       </tr>
     </thead>
     <tbody>
       <tr>
        <td><a href="javascript:{}" onclick="addPiece(1)">add</a></td>
       </tr>
       <tr>
        <td></td>
       </tr>
       <tr>
        <td></td>
       </tr>
       <tr>
        <td></td>
       </tr>
      </tbody>
     </table>

I need clone row in user defined place of table body. User can define place to clone this block by clicking to some link. For example <a href="javascript:{}" onclick="addPiece(1)">add</a> must clone block after the first block in table. How can i do that?

Can you give more details? How does the user define the place? — Felix Kling, Jul 02 '10 at 13:01
How does the user define the space? Please provide some additional specification. — Jason McCreary, Jul 02 '10 at 13:01

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

This answer will help. Add table row in jQuery

Actually in the specified answer it is adding row to the end of the table. But you will not need that selector if you are getting the row from user events.

edited May 23 '17 at 12:30

Community

1
1

answered Jul 02 '10 at 13:09

IsmailS

10,797
21
82
134

score 1 · Answer 2 · answered Jul 02 '10 at 13:09

1

You need the ID of the field, after which the row should be inserted. Then you do:

$('#tr-id').after('<tr><td>New line</td></tr>');

answered Jul 02 '10 at 13:09

JochenJung

7,183
12
64
113

3

You don't *need* an ID per-say, there are many, *many* ways to find an element :) – Nick Craver Jul 02 '10 at 13:10

score 0 · Answer 3 · answered Jul 02 '10 at 13:19

0

You can add a new row after or before a specified row To add row before specified index

$("<tr><td>0</td></tr>").insertBefore( $('#test > tbody > tr').get(0) );

To add row after specified index

$("<tr><td>0</td></tr>").insertAfter( $('#test > tbody > tr').get(0) );

Similary you can use .before() and .after() methods as well.

answered Jul 02 '10 at 13:19

Salman Riaz

83
1
6

Thanks for your reply. What if i need clone this block: in user defined place? User can define place to clone this block by clicking to some link. For example add must clone block after the first block in table. – cliquez Jul 02 '10 at 13:27

score 0 · Answer 4 · answered Jul 02 '10 at 13:22

Here is a very simple function that will create a <tr>, put a <td> inside it and a 5 inside the td. Then it will add it to the end of the tbody in your #test table.

function(){
    var tr = $('<tr/>');
    var td = $('<td/>');
    td.text('5');
    tr.append(td);
    $('#test tbody').append(tr);
}

The var tr and var td can be skipped if you use an HTML string in their place like JochenJung suggested, but doing it this way allows you to, e.g., add classes to the tr, or a colspan to the td.

You could also do something like

$('#table tbody').append($('#table tr:last-child').clone())

but note that this requires the #table to be looked up twice, and doesn't give you a handle on the elements for modification.

(I saved this example here so you can play with it: http://jsbin.com/aduko/edit)

score 0 · Accepted Answer · answered Jul 02 '10 at 13:53

For example you want to add your mentioned block before place 2 then probably this will do fine for you

function addPiece(position) {
    $("#YOURBLOCK").clone().insertBefore( $('#test > tbody > tr').get(position) );
}

Similarly for after insertion

function addPiece(position) {
    $("#YOURBLOCK").clone().insertAfter( $('#test > tbody > tr').get(position) );
}

Add current row into table

5 Answers5