JQuery: Add a new row to a table.

This is a tutorial on how to add a new row to a table using JQuery. In this post, I will show you how to add a new TR row to both the top of the table and the bottom of the table. Furthermore, I will also show you how to fade the row in or delay its addition using the setTimeout method.

Our HTML table.

Below, I have created a simple HTML table. Each row represents a person:

<table id="my_table">
    <tbody>
        <tr>
            <td>John</td>
            <td>Aged 32</td>
            <td>London, England</td>
        </tr>
        <tr>
            <td>Brandon</td>
            <td>Aged 29</td>
            <td>Miami, Florida</td>
        </tr>
        <tr>
            <td>Hillary</td>
            <td>Aged 22</td>
            <td>Houston, Texas</td>
        </tr>
    </tbody>
</table>

Note that I have given this table the ID “my_table”. This is important to note as we will be using this ID as the element selector in our JQuery code.

Adding a row to the bottom of the table.

Let’s start off by instantly adding a new row to the bottom of our table:

//The HTML of the TR row that we want to add to our table.
var newTableRow = '<tr><td>Aarav</td><td>Aged 24</td><td>Surat, India</td></tr>';

//Add the HTML after the last row by using tr:last.
$('#my_table tr:last').after(newTableRow);

In the code above, we created the HTML for the row and assigned it to a JavaScript variable called newTableRow. Afterwards, we added this HTML to the end of our table by using JQuery’s .after() method. We used the “tr:last” selector as this essentially tells JQuery that we want to insert the new row AFTER the last TR element. i.e. Prepend it.

Append a new row to the top of the table.

In some cases, you might want your new TR element to appear at the top of the table. In this case, you can use the .before() method like so:

$('#my_table tr:first').before(newTableRow);

In the snippet above, we used the “tr:first” selector to tell JQuery that it needs to add the HTML BEFORE the first TR element.

If you run the two JavaScript examples above, you will see that they both instantly add the new row to the HTML table. However, what if we wanted it to look a bit “fancier”? What if we want to fade the new row in so that the user is more aware that it has been added?

Fading in the new table row.

In this example, we fade the row in using the .fadeIn() method:

var newTableRow = '<tr><td>Aarav</td><td>Aged 24</td><td>Surat, India</td></tr>';
var newTableRowObj = $(newTableRow);
newTableRowObj.hide();
$('#my_table tr:last').after(newTableRowObj);
newTableRowObj.fadeIn("slow");

What we did:

We created the HTML for our new row.
We converted this HTML into a JQuery object.
Using the .hide() method, we hid the HTML.
We then added the JQuery object to the end of our table.
Finally, we faded the element back in by using the .fadeIn() method.

Essentially, we hid it, added it and then faded it in.

Add it after a couple of seconds.

If you want to delay it and add it after a couple of seconds, you can use the setTimeout() method:

setTimeout(function(){
    $('#my_table tr:last').after(newTableRow);
}, 3000);

Here, we added the new row after 3 seconds (3000 milliseconds). Feel free to change that figure to suit your own needs.