Manipulating HTML Tables – Part 2 (Adding Rows)

In my last blog post, I showed how to add a hard-coded row to a table using jQuery and JavaScript. Now, let’s make this a little more dynamic by gathering input from our user and adding that data to our table.

The HTML

In addition to the table shown in my last blog post, 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) which will then be added to the table. Again, I am using bootstrap, but is not a requirement.

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="PSheriff@pdsa.com"

                    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>

Besides the input fields, there is a <button> that when clicked upon will be responsible for adding the data entered into the table. This button, shown below, is a normal HTML button, and has an onclick event to call a function named updatePerson().

<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 will click on the Add button. The click will fire a function called updatePerson(). This function calls another function called addPersonToTable(). It is within this method that you find code similar to my last blog entry, but instead of hard-coded values, 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>

This code is very similar to my last blog post, but uses jQuery to retrieve the values from the text boxes. Again, notice that you still should 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. This could be done by using JSON objects and storing the data in a hidden field. You could then supply another button to the user that would post back to the server and allow all of the added rows to be gathered from the hidden field and saved to a database.

Past Blog Content

Blog Archive

No Comments