How To Add Edit & Delete Rows Dynamically Using JQuery

in this tutorial we will 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 database, here i am creating functionality to add and delete static row. We do not showing PHP code to store data into database, I am just helping you to add dynamic row on your container.

Checkout other tutorial of Dynamically Add/edit and Delete Using jQuery,

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

add-record-dynamically
There are following steps to need to Add Dynamic Row:

Step 1: I am assuming you have included JQuery into your project.

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

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>

Step 3: Created A div container which has new row content. This container will hide from page.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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 row and removing row from containers.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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 Dynamic Add Records Using Jquery