Dotnetplace.com

.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

Advertise

Loading...


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 asp.net. 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.name = '';

    this.gender = '';

    this.birthday = '';

}

$(function () {

    i = 2;

    $("select").selectBox();

    $("[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 () {

                $(this).parent().closest("tr").remove();

            });

        }

    });

    $("#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();

        $("select").selectBox();

        $("[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();

            obj.name = name;

            obj.gender = gender;

            obj.birthday = birthday;

            inputs.push(obj);

        });

        display(inputs);

        function adderr(f, index) {

            $("#msg").fadeIn('slow').removeClass("hide");

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

            $(index).find("td").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.name + ' - ' + 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="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>

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

 <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.js" type="text/javascript"></script>

 <link href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" 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">

     <thead>

     <tr>

     <th>Sr.#</th>

     <th>Full Name</th>

     <th>Gender</th>

     <th>Birthday</th>

     <th>Add</th>

     <th>Delete</th>

     </tr>

     </thead>

     <tbody>

          <tr>

            <td><span>1&nbsp;</span></td>         

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

            <td>

                <select name="gender[]">

                <option>Select</option>

                    <option>Male</option>

                    <option>Female</option>

                </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>

        </tr>

     </tbody>

     <tfoot>

     <tr>

     <td></td>

     <td>&nbsp;</td>

     <td>&nbsp;</td>

     <td>&nbsp;</td>

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

     <td>&nbsp;</td>

     </tr>

        </tfoot>

    </table>

        <p>

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

        </p>

    </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 asp.net 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.

 

Download

Dynamic rows in html table.rar (7.95 kb)

Demo

See live demo

Protected by Copyscape Online Plagiarism Tool

Comments (7) -

david
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
aamirhasan United States
12/2/2012 5:15:56 AM #

Thank you

Mathilde
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
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.

Cheap MAC Cosmetics
Cheap MAC Cosmetics United States
10/26/2014 9:54:21 AM #

When I initially commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I get four emails with the identical comment. Is there any way you may take away me from that service? Thanks!

Pingbacks and trackbacks (2)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5