2

I just want to ask how can I add a new element after a specific element after the button is clicked.

Here's my sample code:

    <table id="table-1" border="1" style="border: 1px solid #ccc; width: 100%">
        <thead>
            <tr>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>    
            </tr>
        </thead>
        <tbody id="no-row">
            <td colspan="5">no content</td>
        </tbody>            
                    
        <tfoot>
            <tr>
                <td colspan="5">footer</td>
            </tr>
        </tfoot>    
    </table>
    <button id="add-row">Add Row</button>

I have this simple jquery:

$('#add-row').on('click', function(){
        var counter = 1;
        var add_row = '<tbody>';
            add_row += '<tr>';
            add_row += '  <td>' + counter + '</td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '</tr>';         
            add_row += '</tbody>';   
        
        $('#table-1 #no-row').remove();
        
        $('#table-1 thead').append(add_row);
                     
        counter++;             
                     
    });

But it just appending it inside the thead.

Here's the fiddle:

http://jsfiddle.net/rochellecanale/gov88ucm/1/

1
  • You can use .after() in jQuery
    – tektiv
    Jun 2, 2015 at 8:34

4 Answers 4

4

append() inserts the specified content within the selected element. To insert it after the element use the after() method instead:

$('#table-1 thead').after(add_row); 

Updated fiddle

how can i display the newest added row to the bottom?

You can select the tfoot and use before():

$('#table-1 tfoot').before(add_row);

Example fiddle

1
  • Thanks. Ok I tried that but how can i display the newest added row to the bottom?
    – Jerielle
    Jun 2, 2015 at 8:36
2

Try this...

Change $('#table-1 thead').append(add_row); to $('#table-1').append(add_row);

var counter = 1;
$('#add-row').on('click', function(){
    var add_row = '<tbody>';
        add_row += '<tr>';
        add_row += '  <td>' + counter + '</td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '</tr>';         
        add_row += '</tbody>';   

    $('#table-1 #no-row').remove();

    $('#table-1').append(add_row);

    counter++;             

});
2

You need to use the after keyword. The after keyword Insert content, specified by the parameter, after each element in the set of matched elements.

$('#table-1 thead').after(add_row);
0

Your <tbody> is missing a <tr>

<tbody>
  <tr id="no-row">
    <td colspan="5">no content</td>
  </tr>
</tbody>   

change your add_row to remove tbody then append directly to the tbody

$('#table-1 #no-row').remove();
$('#table-1>tbody').append(add_row)

this way, your append function is re-usable as you're currently re-adding the tbody every time.

To answer the question specifically, you can add the ID to tr as above, remove tbody from add_row and add after the no-row:

$('#table-1 #no-row').hide();
$('#table-1 #no-row').after(add_row)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.