How To Add, Edit & Delete Rows Dynamically Using JQuery

in this tutorial we will be discussed how to add and delete records dynamically to the table using jquery, Normally in project we give options to users to add multiple rows and submit into the database.

Here, I am creating functionality to add and delete static rows. We do not show PHP code to store data into the database, I am just helping you to add a dynamic row into HTML container.

Checkout another tutorial on Dynamically Add, Edit and Delete record Using jQuery,

• Add/Delete Record Dynamically With Jquery
• How To Add Dynamic Rows with Jquery

In This article we have ‘add more’ icon link which is adding a new row on the bottom of containers and have to remove the icon link to remove the extra entry from containers. I am using the bootstrap CSS framework for front end.

Steps By Steps to Add Dynamic Row into HTML table Using jQuery

We will follow the following steps to add a dynamically row into the table.

Step 1: I am assuming you have included JQuery into your project using CDN or local copy into the head section of index.html file, if not then use the below code,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Step 2: Add HTML code into your index.html file to show a row with ‘add more’ link button.

<div id="type_container">
    <div class="row form-group" id="edit-0">
        <div class="col-md-2 control-label">
            <label for="username" class="control-label">
                Brand :
            </label>
        </div>
        <div class="col-md-3">
            <select data-placeholder="Choose an Type..." class="form-control" name="">
                <option disabled="disabled" selected="selected" value="0">Select</option>
                <optgroup label="Swedish Cars">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                </optgroup>
                <optgroup label="German Cars">
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </optgroup>
            </select>
        </div>
        <div class="col-md-2 control-label">
            <label for="username" class="control-label">
                Point :
            </label>
        </div>
        <div class="col-md-5 clearfix">
            <div class="row col-md-3">
                <input type="text" maxlength="5" class="form-control input-sm" name="" value="0" />
            </div>
            <div class="col-md-3 control-label">
                <a class="add-type pull-right" href="javascript: void(0)" tiitle="Click to add more"><i class="glyphicon glyphicon-plus-sign"></i></a>
            </div>
        </div>
    </div>
</div>

Step 3: Created A div container that has new row content in the index.html file. This container will hide into the page using the hide class.

<div id="type-container" class="hide">
    <div class="row form-group type-row" id="">
        <div class="col-md-2 control-label">
            <label for="username" class="control-label">
                Brand :
            </label>
        </div>
        <div class="col-md-3">
            <select data-placeholder="Choose an Type..." class="form-control" name="">
                <option disabled="disabled" selected="selected" value="0">Select</option>
                <optgroup label="Swedish Cars">
                    <option value="volvo">Volvo</option>

                    <option value="saab">Saab</option>
                </optgroup>
                <optgroup label="German Cars">
                    <option value="mercedes">Mercedes</option>

                    <option value="audi">Audi</option>
                </optgroup>
            </select>
        </div>
        <div class="col-md-2 control-label">
            <label for="username" class="control-label">
                Point :
            </label>
        </div>

        <div class="col-md-5 clearfix">
            <div class="row col-md-3">
                <input type="text" maxlength="5" class="form-control input-sm" name="" value="0" />
            </div>

            <div class="col-md-3 control-label">
                <a class="remove-type pull-right" targetdiv="" data-id="0" href="javascript: void(0)"><i class="glyphicon glyphicon-trash"></i></a>
            </div>
        </div>
    </div>
</div>

Step 4: Now I have defined JS code and fire event for adding more rows and removing rows from containers.

<script>
jQuery(document).ready(function() {
var doc = $(document);
jQuery('a.add-type').die('click').live('click', function(e) {
     e.preventDefault(); 
    var content = jQuery('#type-container .type-row'),
        element = null;
    for(var i = 0; i<1; i++){
        element = content.clone();
  var type_div = 'teams_'+jQuery.now();
  element.attr('id', type_div);
  element.find('.remove-type').attr('targetDiv', type_div);
        element.appendTo('#type_container');
  
      }
 });
 
 jQuery(".remove-type").die('click').live('click', function (e) {
    var didConfirm = confirm("Are you sure You want to delete");
    if (didConfirm == true) {
        var id = jQuery(this).attr('data-id');
  var targetDiv = jQuery(this).attr('targetDiv');
        //if (id == 0) {
            //var trID = jQuery(this).parents("tr").attr('id');
            jQuery('#' + targetDiv).remove();
       // }
        return true;
    } else {
        return false;
    }
  });

});
</script>

Demo and Download source Code Of Dynamically Add Records Using Jquery