HTML tables are widely used in almost every website and application these days. Often, web developers need to be able to add one or more rows to HTML tables on their web pages. There are several ways to do this using plain JavaScript as well as using third-party libraries such as jQuery. In this article, we will learn how to add table row in jQuery.
The Problem
Typically, web developers need to be able to dynamically insert table rows when the page is loaded, or when an event such as button click is fired. jQuery offers several powerful functions such as append(), prepend(), before() and after() to add table rows. But their result depends on the existing table structure as well as the position where you want to insert the new row. If you do not use the appropriate jQuery function, you may end up with undesirable result. So you need to be careful about what jQuery function you use to add new row to HTML tables.
How to Add Table Row in jQuery
There are several ways to insert table row in jQuery. But there are several important nuances to keep in mind while working with tables. We will cover them below.
1. Using append() with table tag
Append() function allows you to append HTML content at the end of specific page elements. Depending on the jQuery selector, it will append the code at the end of one or more elements. We can use this to add a table row in jQuery. Let us say you have the following HTML table, where you only have row tags tr inside the table tag
<table id="my_table">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>
In the above case, you can easily use append() function to add another row to this table, as shown below.
$(''#my_table').append('<tr><td>3</td></tr>');
In the above code, we select the table tag using its CSS selector and call append() function. In it, we pass the HTML code for the new row. You will end up with the following result.
<table id="my_table">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
This works only if your HTML table has only table tag and no tbody tag.
2. Using append() with tbody
On the other hand, if your table also has a tbody element, as shown below.
<table id="my_table">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>
If you call append() function on table, as shown above, then you will get the following table.
<table id="my_table">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</tbody>
<tr><td>3</td></tr>
</table>
In this case, the new row will be appended after tbody element, which is not desirable. Therefore, you need to modify your append() function to be called on tbody element, instead of table element.
$('#my_table > tbody').append('<tr><td>3</td></tr>');
Now your table will look like the following.
<table id="my_table">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</tbody>
</table>
This will also work if your table has a tfoot tag after tbody tag, with one or more footer rows in it.
If you have an HTML table with its tbody tag is somewhere inside, then you can use find() function to find the tbody tag and call append() function on it. Here is an example to illustrate it.
$("#my_table").find('tbody').append('<tr><td>3</td></tr>');
Nested tables
Sometimes, you may even have nested HTML tables, one inside the other, with each one having a separate tbody tag.
<table id='my_table'>
<tbody id='outer'>
<tr><td>
<table >
<tbody id='inner'>
...
</tbody>
</table>
</td></tr>
</tbody>
</table>
In such cases, you will need to determine whether you want to add new row to outer table or inner table.
If you need to add new row to the outside table, then call append() function on ‘tbody:first’ that is outer table.
$('#my_table > tbody:first').append('<tr><td>3</td></tr>'); The above code will append new row to the first, that is, outer tbody tag.
If you want to add new row to the inner table, then call append() function on ‘tbody:last’ that is the inner tbody tag.
$('#my_table > tbody:last').append('<tr><td>3</td></tr>');
The above code will append new row to the last, that is, inner tbody tag.
Please note, your table will have tbody only if it has at least 1 row. If it has no rows, then it may only have table tag and no tbody tag. So depending on the situation, you will need to call append() function on table or tbody tag.
3. Using after()
You can also use after() function for this purpose. It allows you to add HTML content immediately after a specific element.
Let us say your table has multiple tbody tags.
<table id='my_table'>
<tbody>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
</tbody>
</table>
If your table has multiple tbody tags, then calling append() function on tbody tag will end up adding new row to each tbody tag separately. This is not what we need. In this case, you can look for the last tr tag, that is the last row, and call after() function on it.
$('#my_table > tr:last').after('<tr><td>3</td></tr>');
Here is the table you will get.
<table id='my_table'>
<tbody>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
<tr><td>3</td></tr>
</tbody>
</table>
4. Using prepend()
In jQuery, append() function allows you to add a new row at the end of a specific element, such as table. On the other hand, prepend() function allows you to add a new row at the beginning of specific element. Let us say you have the following HTML table.
<table id="my_table">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>
You can easily add a new row at the beginning of table, as shown below.
$(''#my_table').prepend('<tr><td>3</td></tr>');
In this case, you will get the following result.
<table id="my_table">
<tr><td>3</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>
If your table also has tbody element inside it, then you will need to call the prepend() function on the tbody instead of table. Let us say you have the following HTML table with tbody tag in it.
<table id="my_table">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>
In this case, you need to call prepend() function as shown, on tbody tag.
$('#my_table > tbody').prepend('<tr><td>3</td></tr>');
Then you will get the following table.
<table id="my_table">
<tbody>
<tr><td>3</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>
Let’s say you have nested tables, one inside the other, with each table having a tbody tag.
<table id='my_table'>
<tbody id='outer'>
<tr><td>
<table >
<tbody id='inner'>
...
</tbody>
</table>
</td></tr>
</tbody>
</table>
If you want to add new row to the outer table, then you need to call prepend() function tbody:first.
$('#my_table > tbody:first').prepend('<tr><td>3</td></tr>');
In this case, you will get the following result.
<table id='my_table'>
<tbody id='outer'>
<tr><td>
<table >
<tbody id='inner'>
...
</tbody>
</table>
</td></tr>
<tr><td>3</td></tr>
</tbody>
</table>
On the other hand, if you want to add a new row to inner most table’s tbody tag, then you need to call prepend() function on tbody:last selector.
$('#my_table > tbody:last').prepend('<tr><td>3</td></tr>');
In this case, you will get the following result.
<table id='my_table'>
<tbody id='outer'>
<tr><td>
<table >
<tbody id='inner'>
...
<tr><td>3</td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>
5. Using before()
Just as after() function allows you to add a new row after a specific element, before() function allows you to add a new row before a specific element. Let us say you have the following table with multiple tbody elements. Let us say you have the following HTML table.
<table id='my_table'>
<tbody>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
</tbody>
</table>
Let us say you want to add a new row before the first row of first tbody tag. You can do this using the following code.
$('#my_table > tr:first').before('<tr><td>3</td></tr>');
Here is the HTML table you will get.
<table id='my_table'>
<tbody>
<tr><td>3</td></tr>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
</tbody>
</table>
6. Using Clone()
jQuery also provides clone() function that allows you to clone any HTML element. We can use this to clone a table row and append it back to the table. Let us say you have the following table, with rows also having ID attribute.
<table id='my_table'>
...
<tr id='my_row'>...</tr>
...
</table>
You can clone the above row and add it back to the table with the following code.
$("#my_row").clone().removeAttr("id").appendTo( $("#my_row").parent() );
In the above code, we call clone() function on row with id=my_row. We remove the ID attribute of the cloned row, to avoid duplicate ID values. We call appendTo() function on this cloned row to append it to the table. The $(“#my_row”).parent() means the parent element of said row, that is, the HTML table element.
7. Using JavaScript
Sometimes, you may not have jQuery included on your web pages. In this case, you can add table row using plain JavaScript. Here is the code to do this.
table_object.insertRow(index)
In the above code, index is the number that is used to specify the position to insert new row. It starts with 0, 1, 2…. If you use -1 then it will automatically insert the row at the end. Here is the JavaScript to select our table by its ID attribute. It will return table object.
document.getElementById("my_table")
We call insertRow() function on this object. We set its innerHTML property to the new row’s HTML.
document.getElementById("my_table").insertRow(-1).innerHTML = '<tr><td>3</td></tr>';
Conclusion
In this article, we have learnt many simple ways to easily add table row in jQuery. You can use any of them as per your requirement. We have also covered many special cases to help you work with real-world scenarios. Also, we have learnt how to use different jQuery functions, depending on the position of new row. Unfortunately, there is no one line solution to this problem. Depending on your situation, you will need to use the appropriate solution.
Also read:
How to Disable/Enable Input in jQuery
How to Disable Resizable Property of Textarea
How to Change Element’s Class with JavaScript
Related posts:
Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI & software development.