As developers, we’re always asked to do more for our users. They want their Web pages faster, smaller, and with more features. This means that you have to start working more in JavaScript and jQuery on the client-side. By doing more client-side coding, you reduce post-backs to the server, thereby increasing performance. In this first article of a series on working within HTML and the Web API, I’ll show you how to add, edit, and delete data in an HTML table using JavaScript and jQuery, but no post-backs. In subsequent articles, you’ll learn how to take that data and use the Web API to retrieve and modify this data.

To demonstrate the concepts for this article, I created a page called Paul’s Training Videos (Figure 1). This page allows me to list all of my training videos on Pluralsight, and eventually, to add, edit, and delete them. I’m using Bootstrap in order to have a nice appearance for my Web page, but it’s not required.

Add a Product

The HTML page I use to illustrate these concepts is shown in Listing 1. This HTML creates an empty table with a for the headers of each column in the table. There are three columns: product name, introduction date, and URL. Note that there’s no for this table. I‘ve left the element off on purpose to illustrate how you check for that in jQuery, and add the element, if necessary.

Figure 1: List products by adding rows to a table when the page loads.
Figure 1: List products by adding rows to a table when the page loads.

Add Product Rows to the Table

At the bottom of this HTML page, I created a tag.

$(document).ready(function () {
  productsAdd();
});

Add Rows Dynamically

Let’s make the page a little more dynamic by gathering the product data from the user and adding that data to the table. Add three input fields for the user to input data to add to the product table. The user enters a product name, introduction date, and the URL of the video, as shown in Figure 2. After entering the data into these fields, that data is retrieved from the input fields and added to a new row in the HTML table.

Figure 2: Add products to table with user input.
Figure 2: Add products to table with user input.

In addition to the new input fields, a is added that when clicked, adds the data from the fields into the table. This button, shown at the bottom of Figure 2, is a normal HTML button with a function named productUpdate called from its onclick event.

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

Add a Row from the Input Fields

Once the user adds the data in the input field, they click on the Add button. In response to this click event, the productUpdate() function is called, as shown in the following code snippet.

function productUpdate() {
  if ($("#productname").val() != null &&
      $("#productname").val() != '') {
    // Add product to Table
    productAddToTable();
    // Clear form fields
    formClear();
    // Focus to product name field
    $("#productname").focus();
  }
}

If the Product Name field is filled in with some data, then the productAddToTable function is called to build the new row for the table. Once this function is run, formClear() is called to clear the input fields to prepare for the next row to be added. Finally, input focus is given to the Product Name Input field.

The productAddToTable() function, shown in Listing 3, is similar to the code I wrote earlier when I hard-coded the values. The difference in this method is that it uses jQuery to retrieve the values from the text boxes and build the elements from those values.

The formClear() function uses a jQuery selector to find each input field and set the value of each to a blank string. Setting the value to a blank clears the input field so that the user can enter new data.

function formClear() {
  $("#productname").val("");
  $("#introdate").val("");
  $("#url").val("");
}

Delete a Product

Once you’ve added a few products, you’ll most likely need to delete one or more of those products. Add a Delete button to each row of the table, as shown in Figure 3. This requires you to modify the element by adding a new element with the word Delete, as shown in the following snippet.

<table id="productTable"
        class="table table-bordered 
               table-condensed table-striped">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Introduction Date</th>
      <th>URL</th>
      <th>Delete</th>
    </tr>
  </thead>
</table>
Figure 3: Add a Delete button to allow a user to delete a row from the table.
Figure 3: Add a Delete button to allow a user to delete a row from the table.

Add a Delete Button to Each Row

Modify the productAddToTable() function (Listing 4) to include a button control as you add each row of data. In the JavaScript you write to build the and the elements, add one more that includes the definition for a control. This button control uses some Bootstrap classes for styling and a Bootstrap glyphicon to display an “X” to symbolize the delete function (see Figure 3). The button also needs its onclick event to call the function productDelete(). To this function, pass the keyword this, which is a reference to the button itself.

Delete a Row

The deleteProduct() function accepts the parameter that’s a reference to the delete button. From this control, you can use the jQuery function parents() to locate the buttons containing tag. Once you locate the tag, use the remove() function to eliminate that row from the table, as shown in the following code:

function productDelete(ctl) {
  $(ctl).parents("tr").remove();
}

Edit a Product

You’ve learned how to add and delete rows from an HTML table. Now, turn your attention to editing rows in an HTML table. Just like you added a Delete button to each row in your table, add an Edit button as well (Figure 4). Once more, you need to modify the element by adding a new element with the word Edit, as shown in the following code snippet.

<table id="productTable"
        class="table table-bordered
               table-condensed table-striped">
  <thead>
    <tr>
      <th>Edit</th>
      <th>Product Name</th>
      <th>Introduction Date</th>
      <th>URL</th>
      <th>Delete</th>
    </tr>
  </thead>
</table>
Figure 4: Add an Edit button to allow a user to edit a single row in the table.
Figure 4: Add an Edit button to allow a user to edit a single row in the table.

Adding a Row with an Edit Button

Just like you built a button in JavaScript for deleting a row, you build a button for editing too (Listing 5). The onclick event calls a function named productDisplay(). You’ll pass in the keyword this to the productDisplay() function so you can reference the edit button and thus retrieve the row of data in which this button is located.

Display Data in Input Fields

When the user clicks on the Edit button in the table, store the current row of the table in a global variable. Define a variable called _row within the