Manipulating HTML Tables, Part 1 (Adding Rows)

Paul Sheriff

by Paul D. Sheriff on 7/13/2015

Share this:
Print

Article Details

Date Revised:
7/30/2015

Applies to:
bootstrap, HTML, javascript, jQuery, tables


Users 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 article, I will show you how to work with HTML tables. 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 shown in Listing 1 is an empty table with 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.

<body>
  <div class="container">
    <h1 class="text-center">Add Row to Table (Hard-Coded)</h1>
    <div class="row">
      <div class="center-block col-sm-6">
        <table id="peopleTable" class="table table-bordered
                                       table-condensed 
                                       table-striped">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Email</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>

  <script>

  </script>
</body>

Listing 1: 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 <tbody> tag within the table that has the id of #peopleTableand append a <tr> and the <td> tags as shown in the code below:

function addRows() {
  $("#peopleTable tbody").append(
      "<tr>" +
        "<td>Paul</td>" +
        "<td>Sheriff</td>" +
        "<td>[email protected]</td>" +
      "</tr>"
  );
}

Remember in the empty HTML created earlier, I did not include a <tbody> tag within the table. If you run the addRows() function, no rows will be appended to your table because the result of the selector comes back as nothing. You really should always have a <tbody> in all of your tables. However, if you don’t, you can always add one programmatically, and I’ll show you how to do that now. First check to see if the selector of your table id and the <tbody> returns something. If it does not, then 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:

if ($("#peopleTable tbody").length == 0) {
  $("#peopleTable").append("<tbody></tbody>");
}

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

<script>
  // Add rows to <table>
  function addRows()
  {
    // First check if a <tbody> tag exists, add one if not
    if ($("#peopleTable tbody").length == 0) {
      $("#peopleTable").append("<tbody></tbody>");
    }

    // Append row to the table
    $("#peopleTable tbody").append(
        "<tr>" +
          "<td>Paul</td>" +
          "<td>Sheriff</td>" +
          "<td>[email protected]</td>" +
        "</tr>"
        );

    $("#peopleTable tbody").append(
        "<tr>" +
          "<td>Michael</td>" +
          "<td>Krasowski</td>" +
          "<td>[email protected]</td>" +
        "</tr>"
        );
  }
</script>

Listing 2: Our complete method to add a couple or rows to our HTML table

You can call the above function when the document is loaded by adding the jQuery document.ready function just before the ending </script> tag. You will then end up with your screen looking something like Figure 1.

$(document).ready(function () {
  addRows();
});
  Add a couple or rows to our HTML table

Figure 1: Adding rows to a table using jQuery

Summary

In this article, 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 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. In my next article, you will learn to add rows to a table using data input by the user.


Topic: JavaScript and jQuery

Sign in with

Or register