.NET Articles, Web Devploment, ASP.NET, HTML, Sharepoint 2010, Aamir Hasan
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here



Posted by Aamir Hasan   on Tuesday, September 4, 2012 Total Views:  

This example demonstrates how to add, delete rows dynamically in HTML table using jquery. When user will click on add button new row will be created on last row of table. Field info contact input name, select gender and input date attached with date picker will add on row created. User can delete a created row by click on delete button on each row. Submit button will display all rows input values on div. Some style will be applied on table. Validation is also applied to submit empty inputs values.  I have also applied style on combo box by using style jquery plugin. I have created this example in In this example, I will assume that you are familiar with jquery methods.

1st  Step: Create cascading style sheet with name tablecss.css and add the following CSS given below. 

2nd Step: create tablejs.js and add the following script given below.

function Info() { = '';

    this.gender = '';

    this.birthday = '';


$(function () {

    i = 2;


    $("[name=birthday]").datepicker({ maxDate: new Date });

    $("#delete").live("click", function (e) {

        if ($('#table1  tbody > tr').length <= 1) {

            return false;


        if ($(this).parent().parent().find("input[name='add']").val()) {

            return false;


        if (confirm("Are you sure want to delete?")) {

            $(this).parent().closest("tr").css("background-color", "#FFFFEA");

            $(this).fadeOut('slow', function () {





    $("#add").live("click", function (e, index) {

        $('#table1  tbody > tr:last').after('<tr><td><span>' + (i++) + '&nbsp;</span></td><td><input type="text" name="fullname[]"></td><td><select name="gender[]"><option>Select</option><option>Male<option>Female</select></td><td><input type="text" name="birthday"></td><td><input type=button value=" Add " name=add id=add></td><td><input type=button value=" Delete " name=delete id=delete></td>');

        $('#table1  tbody > tr:last').prev().find("input[name='add']").remove();


        $("[name=birthday]").datepicker({ maxDate: new Date });


    $("#submit").live("click", function (x) {

        var inputs = new Array();

        $("#table1  tbody  tr").each(function (i, index) {

            var name = $(index).find("td:eq(1) input").val();

            var gender = $(index).find("td:eq(2) select").val();

            var birthday = $(index).find("td:eq(3) input").val();

            if (!isvalid(name, gender, birthday, i, index)) {

                return false;


            var obj = new Info();

   = name;

            obj.gender = gender;

            obj.birthday = birthday;




        function adderr(f, index) {


            // $(index).find("td:eq(" + f + ")").addClass("error");



        function isvalid(name, gender, birthday, i, index) {

            $("#table1  tbody  tr > td ").removeClass("error");

            if ($.trim(name) == '') {

                $("#msg").html("Please enter the fullname at position " + i);

                adderr(1, index);

                return false;


            if ($.trim(gender) == 'Select') {

                $("#msg").html("Please select gender at position " + i);

                adderr(2, index);

                return false;


            if ($.trim(birthday) == '') {

                $("#msg").html("Please enter the birthday at position " + i);

                adderr(3, index);

                return false;


            return true;


        function display(obj) {

            $(obj).each(function (i, index) {

                $("#disp").append(i + ' ) ' + + ' - ' + index.gender + ' - ' + index.birthday + "<br>");





3rd Step: Add the following JavaScript and cascading style sheet reference under the head section given below.


<link href="tablecss.css" rel="stylesheet" type="text/css" />

<link type="text/css" rel="stylesheet" href="jquery.selectBox.css" />

<script src="" type="text/javascript"></script>

<script type="text/javascript" src="jquery.selectBox.min.js"></script>

 <script src="" type="text/javascript"></script>

 <link href="" rel="stylesheet" type="text/css"/>

 <script src="tablejs.js" type="text/javascript"></script>

The following JavaScript’s have  jquery , jquery UI , jquery selectbox plugin library and table add/delete/submit functions.

4th Step: Add the following HTML tag under the body section given below.

    <div id="all">

    <div id="msg" class="hide">&nbsp;</div>

     <table id="table1">




     <th>Full Name</th>










            <td><input type="text" name="fullname[]"/></td>


                <select name="gender[]">






            <td><input type="text" name="birthday"/></td>

            <td><input type="button"  value=" Add " name="add" id="add"/></td>

            <td><input type="button"  value=" Delete " name="delete" id="delete"/></td>









     <td><input type="button" value=" Submit " id="submit" name="submit"/></td>






            <div id="disp">&nbsp;</div>




Below script line will find input value in 2 column of table.

   var name = $(index).find("td:eq(1) input").val();

Below line describe that JavaScript constructor created with name Info

var obj = new Info();

You can also submit this form to server side by using form method or you can submit all created rows values to server side by using Ajax method. I will guide you how to submit this form values to server side in my next article.

Note: I have tested this example on IE (10, 9 8 and 7), Google Chrome, Safari, Opera Firefox and IPad. If you have alternative solution, please comments here to share with us. CSS nth-child will not work on the browsers which does not support nth-child class like IE 8 and 7.



Dynamic rows in html table.rar (7.95 kb)


See live demo

Protected by Copyscape Online Plagiarism Tool

Comments (12) -

david United Kingdom
10/1/2012 8:28:24 AM #

Exellent work... Good idea of using css.....

vijay jangid
vijay jangid India
10/4/2012 10:35:26 AM #

Exellent work body ... keep it up...

vijay jangid
vijay jangid India
10/4/2012 10:36:05 AM #

Exellent work

aamirhasan United States
12/2/2012 5:15:56 AM #

Thank you

Mathilde United States
12/10/2012 5:10:58 PM #

Hi there,

Thank you so much for this article. Can I use it for PHP?

   aamir ha
aamir ha Islamic Republic of Pakistan
1/2/2013 6:54:51 PM #

Yes, you can use it with any server site programming language

Ahmad United States
4/2/2014 5:10:19 AM #

If you are neutral in situations of injustice, you have chosen the side of the oppressor. If an elephant has its foot on the tail of a mouse and you say that you are neutral, the mouse will not appreciate your neutrality.

Nickolas Kubeika
Nickolas Kubeika United States
5/14/2015 10:04:26 AM #


Bryon Blacock
Bryon Blacock United States
6/30/2015 8:20:32 AM #

I have been browsing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the net will be a lot more useful than ever before.|

Jessi Apana
Jessi Apana United States
6/30/2015 10:00:18 AM #

I couldn't refrain from commenting. Exceptionally well written!|

Jewel Chell
Jewel Chell United States
7/20/2015 4:58:57 AM #

Mertie Everline
Mertie Everline United States
7/20/2015 7:16:35 AM #

I gotta  favorite this  internet site  it seems  very helpful  very useful

Anton Holen
Anton Holen United States
10/2/2015 2:16:57 PM #

Este Barcelona hembrea Un despiezo vecino. Cual Barcelona maximiza Un aeronauta abjurable

Pingbacks and trackbacks (1)+

Add comment

  Country flag

  • Comment
  • Preview

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5