Manipulating HTML Tables, Part 2 (Adding Rows Dynamically)

Paul Sheriff

by Paul D. Sheriff on 7/30/2015

Share this:
Print

Article Details

Date Revised:
8/20/2015

Applies to:
Development, HTML, Javascript and jQuery


In my last article, I showed how to add hard-coded rows to a table using jQuery and JavaScript. Let’s expand upon that article and make this code a little more dynamic by gathering input from our user and adding that data to a table.

The HTML

In addition to the table shown in my last article, you now are adding three input fields for the user to input the data to add to the table. The user will input a first name, last name and email address (Figure 1). The data input is added to the table. Listing 1 shows the code for this HTML.

Figure 1: Add rows to a table using user input

<div class="container">
  <h1 class="text-center">Add Row to Table</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 class="row">
    <div class="center-block col-sm-6">
      <div class="panel panel-primary">
        <div class="panel-heading">
          Person Information
        </div>
        <div class="panel-body">
          <div class="form-group">
            <label for="firstname">
              First Name
            </label>
            <input type="text"
                    class="form-control"
                    value="Paul"
                    id="firstname" />
          </div>
          <div class="form-group">
            <label for="lastname">
              Last Name
            </label>
            <input type="text"
                    class="form-control"
                    value="Sheriff"
                    id="lastname" />
          </div>
          <div class="form-group">
            <label for="email">
              Email
            </label>
            <input type="email"
                    class="form-control"
                    value="[email protected]"
                    id="email" />
          </div>
        </div>
        <div class="panel-footer">
          <div class="row">
            <div class="col-xs-12">
              <button type="button" id="updateButton"
                      class="btn btn-primary"
                      onclick="updatePerson();">
                Add
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Listing 1: Add input fields for the user to enter values into the table

Besides the input fields, there is a <button> that when clicked will be responsible for adding the data entered into the table. This button, shown below, is a normal HTML button with a function named updatePerson called from the onclick event.

<button type="button" id="updateButton"
        class="btn btn-primary"
        onclick="updatePerson();">
  Add
</button>

Adding a row

After entering data into the text boxes, the user clicks on the Add button. The click event calls the updatePerson() function. This function calls another function, shown in Listing 2, called addPersonToTable(). It is within this method that you find code similar to my last article, but instead of hard-coded values, it retrieves the values from the input fields and places them into the <td> tags.

<script>
  // This function is called from the button onclick
  function updatePerson() {
    // Add person to Table
    addPersonToTable();      
  }

  // Add row to <table>
  function addPersonToTable()
  {
    // 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>" + $("#firstname").val() + "</td>" +
          "<td>" + $("#lastname").val() + "</td>" +
          "<td>" + $("#email").val() + "</td>" +
        "</tr>"
        );
  }
</script>

Listing 2: Add data to a table by retrieving values from input fields.

This code is very similar to my last article, but uses jQuery to retrieve the values from the text boxes. You should still always check for a <tbody> tag and ensure it is there before adding rows to your table.

Summary

By using jQuery and JavaScript you can build up a table without performing any post-backs to the server. This means that the results are almost instantaneous and leads to a very good user experience. Of course, you will still need a method to eventually post the data back to the server. You can do this by using JSON objects and storing the data in a hidden field. You could then supply another button to the user that posts back to the server and allows all of the added rows to be gathered from the hidden field and saved to a database. Another option would be to make an Ajax call to a Web API method to save the data. In the next article, you will learn how to delete the data from a row in the table.


Topic: Development

Sign in with

Or register