Users continue to demand faster and more dynamic user experiences in web applications. One way to accomplish this is to start doing more with JavaScript and jQuery, thereby eliminating or reducing post-backs to the server. In this first blog post of many, I will show you how to work with HTML tables. In this first blog you will learn how to add rows to a table using JavaScript and jQuery.

The HTML

For these samples, I am using Bootstrap in order to have a nice appearance for my web page. However, Bootstrap is not required for these samples. The HTML I am using creates an empty table with just a <thead> for the headers of each column in the table. Note that there is no <tbody>. We will check for that in our jQuery and add one if necessary.

Figure 1: Adding rows to a table using jQuery

Figure 2: HTML Table Markup

Adding a Row

Within the <script> tag, create a function called addRows(). This function is where you will use the append() method to add a <tr> with the appropriate number of <td> tags to form a row for your table. Use a jQuery selector to locate the id attribute of your table, and the <tbody> tag and append a <tr> and the <td> tags as shown in the code below:

If you read the HTML I posted earlier, you will notice that I did not include a <tbody> tag within the table. So, if you were to run the addRows() function, then no rows will be appended to your table because the result of the selector comes back as nothing. First off, you really should always have a <tbody> in all of your tables. However, if you don’t, then no problem, you can always add one programmatically. First check to see if the selector of your table id and the <tbody> returns something. If it does not, then simply append a <tbody> tag to the table prior to calling the append() with the rows you wish to add. You do this with the code shown below:

So, our complete method to add a couple or rows to our HTML table, looks like the code shown below:

You can call the above function when the document is loaded by adding the jQuery document.ready function just before the ending </script> tag.

Summary

In this blog post you learned how to add rows to an HTML table using JavaScript and jQuery. One important check you should always make is to find out if a <tbody> tag exists, and if it does not, then go ahead and add it. While you could just append rows directly to the table and not to the <tbody>, you are not guaranteed where those rows will be appended. On different browsers, this could cause issues. Using the method presented here always ensures your table is properly formed.