Dynamic Rows in Table using JQuery

Fri, Jul 18, 2014

Javascript Programming #html #javascript #jquery

In this article, we will look at how to add/remove row from a table dynamically using JQuery. This is a simple yet useful code whenever we want to let users enter as many data as they want. As easy as it may sound but there is a pitfall when we are doing this.

Let’s start by creating a HTML table. First we will be importing the necessary JS and CSS into our page.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>

And here are the codes for the table.

<h3>Data</h3>
<table class="table table-striped">
    <thead>
        <th>Product Detail</th>
        <th>Price</th>
        <th> </th>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="" class="form-control"/></td>
            <td><input type="text" value="" class="form-control"/></td>
            <td><a href="#" class="remove-row"><span class=" glyphicon glyphicon-minus"></span></a></td>
        </tr>
    </tbody>
</table>
<div><a href="#" id="add-row"><span class="glyphicon glyphicon-plus"></span>New Detail</a></div>

It’s a very simple data table, with 2 input fields on each row, and a “New Detail” link to create new row. Every row will also consist a delete link for user to remove this particular row. Here is how it looks like.

How table looks like

How the table looks like in browser

Now we can add in some javascript codes. There are 2 functions in our code, one is to add the row, another one is to remove(obviously). I will put the explanation in the comment.

// Add a row whenever user clicks on the #add-row link
$('#add-row').on('click', function(e){
   e.preventDefault();
   
   var tableBody = $('.table > tbody'), 
     // we will need to clone the last row, else we will be simply pointing to the same row. By not cloning it, we are simply moving the last row to the last row.
     lastRowClone = $('tr:last-child', tableBody).clone();
   
   // clear the values in the text field.
   $('input[type=text]', lastRowClone).val('');  

   // and finally we append the row after the last row.
   tableBody.append(lastRowClone);
});

$('.remove-row').on('click', function(e){
  e.preventDefault();
  // find out the row that current link resides in, and remove it.
  var row = $(this).parent().parent();
  row.remove();
});

Here is the jsfiddle link (http://jsfiddle.net/nGAMh/1/) for the code above. Everything seems to work fine, we can add new row to the table by just click on the “New Detail” link.

Wait a minute…..

The remove function only work on the new row. And I thought I already attached an event to it and telling it to remove the row when it was clicked? What went wrong?

Reason being the event was attach when the page is loaded, when new row is dynamically added in, the event doesn’t apply to it.

How do we solve this?

We need to tweak the remove function a little, instead of attaching the event to the link directly, we can attach the event to the table itself. Here is the new code.

$('.table').on('click', '.remove-row', function(e){
  e.preventDefault();
  var row = $(this).parent().parent();
  row.remove();
})

As we can see here, the click event is now attached to the table, and with a selector string to filter the descendants of the selected elements that trigger the event(according to JQuery documentation). By doing this, the remove function will work just fine.

Here is the final and working sample code.

http://jsfiddle.net/7e9a6/1/