dynamic table in Javascript /Jquery

5 New Member

Hi, I have created a dynamic table using jquery. and this table is nested table.
But the problem is, when i want to add rows dynamically first row is created smoothly but after that row , all rows are created under that last row. where the nested table is

my code is attached here
----------------

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html>

<head>

    <title>Beneficiary Change Form</title>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>

        function AddRow() {

            document.getElementById("dataTable").insertRow(1).innerHTML = '<td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td>';

        }

        function RemoveRow() {

            document.getElementById("dataTable").remove(1).innerHTML = '<td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td>';

        }
 
        function AddTableRow() {

            $("#dataTable").last().after("<tr><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td></tr>");

        }
 
    </script>

</head>
 
<body style='text-align: center'>
 
    <input type='file' style='display: none;' id='inputfile' /><br />

    <form name='BNFChangeForm' id='BNFChangeForm' method='POST' action=''>

        <table style="text-align: center; width: 75%; padding-left: 150px;" border="0" id="">

            <tr>

                <td style="text-align: center; font-size: x-large">Beneficiary Change Form

                    <hr />

                </td>

            </tr>

            <tr>

                <td style="text-align: center">

                    <b>Member Account Number : </b>9999999999 aaaaaaaaaa

                </td>

            </tr>

            <tr>

                <td style="text-align: left">

                    <b>Select Share ID </b>

                    <select style="width: 100px">

                        <option>01</option>

                        <option>02</option>

                        <option>03</option>

                        <option>04</option>

                        <option>05</option>

                    </select>

                    <input type="submit" onclick="" id="BtnRefresh" value="Refresh" />

                </td>

            </tr>

            <tr>

                <td style="text-align: left">

                    <br>

                    <p style='font-size: large; font-weight: bold; text-align: left;'>

                        Please review the updated beneficiary information below and sign in the space provided. If there are changes, 

                        please note the correction and return the form to an Alliant Member Service Representative for processing. 

                    </p>

                </td>

            </tr>

        </table>
 
        <div class="">

            <div class="" id="chartRow;">

                <!-- <div style="text-align:right;width:90%">

                    <a href="javascript:void(0);" id='anc_add'>Add Row</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" id='anc_rem'>Remove Row</a><br>

                </div>-->
 
                <br>

                <table width="90%" id="dataTable" border="1">

                    <tr>

                        <td style="text-align: center; vertical-align: top">A</td>

                        <td style="text-align: center; vertical-align: top">M</td>

                        <td style="text-align: center; vertical-align: top">D</td>

                        <td style="text-align: center; vertical-align: top">Beneficiary Name</td>

                        <td style="text-align: center; vertical-align: top">Address</td>

                        <td style="text-align: center; vertical-align: top">SSN</td>

                        <td style="text-align: center; vertical-align: top">DOB</td>

                        <td style="text-align: center; vertical-align: top">%</td>

                    </tr>

                    <tr>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" checked="checked" /></td>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" /></td>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" /></td>

                        <td style="text-align: center; vertical-align: top">Bill Hampe</td>

                        <td style="text-align: center; vertical-align: top">12345 W. Carmichael Blvd.Rancho Cucamonga, CA 12345-6654</td>

                        <td style="text-align: center; vertical-align: top">xxx-xx-1234</td>

                        <td style="text-align: center; vertical-align: top">12/12/2014</td>

                        <td style="text-align: center; vertical-align: top">50%</td>

                    </tr>

                    <tr>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" /></td>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" checked="checked" /></td>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" /></td>

                        <td style="text-align: center; vertical-align: top">Sandhya Gowravajhala</td>

                        <td style="text-align: center; vertical-align: top">Trump Tower 2345 Northwestern Ave, Unit 213 Chicago, IL 60666-0945</td>

                        <td style="text-align: center; vertical-align: top">xxx-xx-1234</td>

                        <td style="text-align: center; vertical-align: top">12/12/2014</td>

                        <td style="text-align: center; vertical-align: top">50%</td>

                    </tr>
 
                </table>

            </div>

        </div>

        <div>

            <table width="90%" border="0" id="Table1">

                <tr>

                    <td style="text-align: right; padding-right: 0px" colspan="8">Total:

                        <input type="text" readonly="readonly" value="100%" style='border-style: none' />

                    </td>

                </tr>

            </table>

        </div>

        <div style="text-align: right; width: 90%">

            <input type="submit" onclick="" id="ButtonSubmit" value="Submit" />

            <input type="button" onclick="javascript: void (0);" id="anc_add" value="Add Row" />

            <input type="button" onclick="javascript: void (0);" id="anc_rem" value="Remove Row" />

            <!--<a href="javascript:void(0);" id='anc_add1'>Add Row</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" id='anc_rem1'>Remove Row</a>-->

            <br>

        </div>

        <!--  <table align='center' style='width: 75%'>

            <tr>

                <td align='center'>

                    <input id='btnValidate' type='submit' value='Validate' disabled='disabled' onclick='SetValidFlg(03)' />

                    <input id='btnSubmit' type='submit' value='Submit' onclick='SetValidFlg(01)' />

                    <input id='btnCancel' type='submit' value='Cancel' onclick='SetValidFlg(02)' />

                </td>

            </tr>

        </table>-->
 
        <script>

            $(document).ready(function () {

                $(document).ready(function () {

                    var cnt = 2;

                    $("#anc_add").click(function () {

                        $('#dataTable tr').last().after("<tr><td style=\"WIDTH: 2%;text-align:center\"><input type='checkbox' id='checkboxAdd' value='Add'/></td>" +

                            "<td style=\"WIDTH: 2%\;text-align:center\"><input type='checkbox' id='CheckBoxModify' value='Modify'/></td>" +

                            "<td style=\"WIDTH: 2%;text-align:center\"><input type='checkbox' id='CheckDelete' value='Delete'/></td>" +

                            "<td style=\"WIDTH: 300px\"><input type=text id='TextBeneficiaryName' style=\"WIDTH: 300px\" ></input></td>" +

                            "<td style=\"WIDTH: 300px\"><table id='"+cnt+"' border=0>" +

                            "<tr><td style=\"rowspan='2';vertical-align:top\">Add</td><td ><input type='text'><br><input type='text'></td></tr>" +

                            "<tr><td>City</td><td><input type='text'></td><td>St</td><td><input type='text'></td></tr>" +

                            "<tr><td>Zip</td><td><input type='text'></td><td>country</td><td><input type='text'></td></tr>" +

                            "</table></td>" +

                            "<td style=\"WIDTH: 100px\"><input type=text id='TextSSN' style=\"WIDTH:100px\"></input></td>" +

                            "<td style=\"WIDTH: 100px\"><input type=text id='TextDob' style=\"WIDTH: 100px\"></input></td>" +

                            "<td style=\"WIDTH: 100px\"><input type=text id='TextPercentage' style=\"WIDTH: 100px\" class = \"numeric\"></input></td></tr>");

                        //var x = 'Table"+cnt+"';

                        //alert(x);

                        cnt++;

                    });
 
                    $("#anc_rem").click(function () {

                        if ($('#dataTable tr').size() > 1) {

                            $('#dataTable tr:last-child').remove();

                        } else {

                            alert('One row should be present in table');

                        }

                    });
 
                });

            });
 
            var specialKeys = new Array();

            specialKeys.push(8); //Backspace

            $(function () {

                $(".numeric").bind("keypress", function (e) {

                    var keyCode = e.which ? e.which : e.keyCode;

                    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);

                    $(".error").css("display", ret ? "none" : "inline");

                    return ret;

                });

                $(".numeric").bind("paste", function (e) {

                    return false;

                });

                $(".numeric").bind("drop", function (e) {

                    return false;

                });

            });
 
        </script>

    </form>

</body>

</!>

Dec 1 '14 #1

Subscribe Reply

2764

Claus Mygind

571

Contributor

Your code is very difficult to read because
1. you did not enclosed them in the code tags.
2. with no indentations in the code it is hard to see what belongs to what.

The code below in the code tags is your code with no changes but with the indentations added. That should give you some reference of what belongs to what. You have some rather unique styling attributes. You may want to remove them for the time being to help you understand what is going on in your code.

Also, it is a little difficult to figure out which table you wish to add rows to. In your question you may want to simply say "I wish to add rows to the 'dataTable' or 'Table1'" then your question would be a little clearer.

Sorry for the limited help.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html>

<head>

    <title>Beneficiary Change Form</title>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>

        function AddRow() {

            document.getElementById("dataTable").insertRow(1). innerHTML = '<td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td>';

        }

        function RemoveRow() {

            document.getElementById("dataTable").remove(1).inn erHTML = '<td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td>';

        }
 
        function AddTableRow() {

            $("#dataTable").last().after("<tr><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td><td><input type=text></input></td></tr>");

        }
 
    </script>

</head>
 
<body style='text-align: center'>
 
    <input type='file' style='display: none;' id='inputfile' /><br />

    <form name='BNFChangeForm' id='BNFChangeForm' method='POST' action=''>

        <table style="text-align: center; width: 75%; padding-left: 150px;" border="0" id="">

            <tr>

                <td style="text-align: center; font-size: x-large">Beneficiary Change Form

                    <hr />

                </td>

            </tr>

            <tr>

                <td style="text-align: center">

                    <b>Member Account Number : </b>9999999999 aaaaaaaaaa

                </td>

            </tr>

            <tr>

                <td style="text-align: left">

                    <b>Select Share ID </b>

                    <select style="width: 100px">

                        <option>01</option>

                        <option>02</option>

                        <option>03</option>

                        <option>04</option>

                        <option>05</option>

                    </select>

                    <input type="submit" onclick="" id="BtnRefresh" value="Refresh" />

                </td>

            </tr>

            <tr>

                <td style="text-align: left">

                    <br>

                    <p style='font-size: large; font-weight: bold; text-align: left;'>

                        Please review the updated beneficiary information below and sign in the space provided. If there are changes,

                        please note the correction and return the form to an Alliant Member Service Representative for processing.

                    </p>

                </td>

            </tr>

        </table>
 
        <div class="">

            <div class="" id="chartRow;">

                <!-- <div style="text-align:right;width:90%">

                <a href="javascript:void(0);" id='anc_add'>Add Row</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" id='anc_rem'>Remove Row</a><br>

                </div>-->
 
                <br>

                <table width="90%" id="dataTable" border="1">

                    <tr>

                        <td style="text-align: center; vertical-align: top">A</td>

                        <td style="text-align: center; vertical-align: top">M</td>

                        <td style="text-align: center; vertical-align: top">D</td>

                        <td style="text-align: center; vertical-align: top">Beneficiary Name</td>

                        <td style="text-align: center; vertical-align: top">Address</td>

                        <td style="text-align: center; vertical-align: top">SSN</td>

                        <td style="text-align: center; vertical-align: top">DOB</td>

                        <td style="text-align: center; vertical-align: top">%</td>

                    </tr>

                    <tr>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" checked="checked" /></td>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" /></td>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" /></td>

                        <td style="text-align: center; vertical-align: top">Bill Hampe</td>

                        <td style="text-align: center; vertical-align: top">12345 W. Carmichael Blvd.Rancho Cucamonga, CA 12345-6654</td>

                        <td style="text-align: center; vertical-align: top">xxx-xx-1234</td>

                        <td style="text-align: center; vertical-align: top">12/12/2014</td>

                        <td style="text-align: center; vertical-align: top">50%</td>

                    </tr>

                    <tr>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" /></td>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" checked="checked" /></td>

                        <td style="text-align: center; vertical-align: top">

                            <input type="checkbox" /></td>

                        <td style="text-align: center; vertical-align: top">Sandhya Gowravajhala</td>

                        <td style="text-align: center; vertical-align: top">Trump Tower 2345 Northwestern Ave, Unit 213 Chicago, IL 60666-0945</td>

                        <td style="text-align: center; vertical-align: top">xxx-xx-1234</td>

                        <td style="text-align: center; vertical-align: top">12/12/2014</td>

                        <td style="text-align: center; vertical-align: top">50%</td>

                    </tr>
 
                </table>

            </div>

        </div>

        <div>

            <table width="90%" border="0" id="Table1">

                <tr>

                    <td style="text-align: right; padding-right: 0px" colspan="8">Total:

                        <input type="text" readonly="readonly" value="100%" style='border-style: none' />

                    </td>

                </tr>

            </table>

        </div>

        <div style="text-align: right; width: 90%">

            <input type="submit" onclick="" id="ButtonSubmit" value="Submit" />

            <input type="button" onclick="javascript: void (0);" id="anc_add" value="Add Row" />

            <input type="button" onclick="javascript: void (0);" id="anc_rem" value="Remove Row" />

            <!--<a href="javascript:void(0);" id='anc_add1'>Add Row</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" id='anc_rem1'>Remove Row</a>-->

            <br>

        </div>

        <!-- <table align='center' style='width: 75%'>

        <tr>

        <td align='center'>

        <input id='btnValidate' type='submit' value='Validate' disabled='disabled' onclick='SetValidFlg(03)' />

        <input id='btnSubmit' type='submit' value='Submit' onclick='SetValidFlg(01)' />

        <input id='btnCancel' type='submit' value='Cancel' onclick='SetValidFlg(02)' />

        </td>

        </tr>

        </table>-->
 
        <script>

            $(document).ready(function () {

                $(document).ready(function () {

                    var cnt = 2;

                    $("#anc_add").click(function () {

                        $('#dataTable tr').last().after("<tr><td style=\"WIDTH: 2%;text-align:center\"><input type='checkbox' id='checkboxAdd' value='Add'/></td>" +

                        "<td style=\"WIDTH: 2%\;text-align:center\"><input type='checkbox' id='CheckBoxModify' value='Modify'/></td>" +

                        "<td style=\"WIDTH: 2%;text-align:center\"><input type='checkbox' id='CheckDelete' value='Delete'/></td>" +

                        "<td style=\"WIDTH: 300px\"><input type=text id='TextBeneficiaryName' style=\"WIDTH: 300px\" ></input></td>" +

                        "<td style=\"WIDTH: 300px\"><table id='"+cnt+"' border=0>" +

                        "<tr><td style=\"rowspan='2';vertical-align:top\">Add</td><td ><input type='text'><br><input type='text'></td></tr>" +

                        "<tr><td>City</td><td><input type='text'></td><td>St</td><td><input type='text'></td></tr>" +

                        "<tr><td>Zip</td><td><input type='text'></td><td>country</td><td><input type='text'></td></tr>" +

                        "</table></td>" +

                        "<td style=\"WIDTH: 100px\"><input type=text id='TextSSN' style=\"WIDTH:100px\"></input></td>" +

                        "<td style=\"WIDTH: 100px\"><input type=text id='TextDob' style=\"WIDTH: 100px\"></input></td>" +

                        "<td style=\"WIDTH: 100px\"><input type=text id='TextPercentage' style=\"WIDTH: 100px\" class = \"numeric\"></input></td></tr>");

                        //var x = 'Table"+cnt+"';

                        //alert(x);

                        cnt++;

                    });
 
                    $("#anc_rem").click(function () {

                        if ($('#dataTable tr').size() > 1) {

                            $('#dataTable tr:last-child').remove();

                        } else {

                            alert('One row should be present in table');

                        }

                    });
 
                });

            });
 
            var specialKeys = new Array();

            specialKeys.push(8); //Backspace

            $(function () {
 
                $(".numeric").bind("keypress", function (e) {

                    var keyCode = e.which ? e.which : e.keyCode;

                    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);

                    $(".error").css("display", ret ? "none" : "inline");

                        return ret;

                });
 
                $(".numeric").bind("paste", function (e) {

                    return false;

                });
 
                $(".numeric").bind("drop", function (e) {

                    return false;

                });

            });

        </script>

    </form>

</body>

</!>

Dec 1 '14 #2

Exequiel

288

Contributor

try to visit this link, This can help you how to add row and fields in a table, your code is difficult to understand, there are lots of easy way to code that kind of situation. just visit this link http://bytes.com/topic/javascript/an...namic-form-dom
or download this file. http://www.mediafire.com/download/bk...8aav/bytes.rar

Dec 4 '14 #3

neelmk

New Member

Hi all thanks to your reply. I am now able to create dynamic table. now please help me how to assign dynamic id to this table's input controls. I am attaching the code

Expand|Select|Wrap|Line Numbers

 
var row=2;

 function AddRow() {
 
            document.getElementById("dataTable").insertRow(-1).innerHTML = '' +

                '<td style=\"WIDTH: 2%;text-align:center\"><input type="checkbox"  value="Add" id="c"+row+"" /></td>' +

                '<td style=\"WIDTH: 2%\;text-align:center\"><input type="checkbox" value="Modify" id="CheckModify"+cnt   /></td>' +

                '<td style=\"WIDTH: 2%;text-align:center\"><input type="checkbox" value="Delete" id="CheckDelete"+cnt  /></td>' +

                '<td><input type=text  id="Ben_1"></input></td>' +

                '<td>' +

                '<table>' +

                '<tr><td style=\"rowspan="2";vertical-align:top\">Add</td><td><input type="text" ><br><input type="text" ></td></tr>' +

                '<tr><td>City</td><td><input type="text" ></td><td>St</td><td><input type="text" ></td></tr>' +

                '<tr><td>Zip</td><td><input type="text"  ></td><td>country</td><td><input type="text" ></td></tr>' +

                '</table>' +

                '</td>' +

                '<td><input type=text ></input></td>' +

                '<td><input type=text ></input></td>' +

                '<td><input type=text ></input></td>';
 
            }
 
            row++;

            //alert(row);

        }

Dec 4 '14 #4

Claus Mygind

571

Contributor

You can use your row counter as part of the table name

When you add a number to a string in JavaScript the result is a string.

So just adding your counter to some string like "tbl"+1 or using your variable row it would look like this "tbl"+row would give you a unique id for that table.

Note - to add the unique table name to the inner table you need to mind your quotes and double quotes to make sure they add up.

see highlighted code below

Expand|Select|Wrap|Line Numbers

  
    var row=2;

     function AddRow() {
 
                document.getElementById("dataTable").insertRow(-1).innerHTML = '' +

                    '<td style=\"WIDTH: 2%;text-align:center\"><input type="checkbox"  value="Add" id="c"+row+"" /></td>' +

                    '<td style=\"WIDTH: 2%\;text-align:center\"><input type="checkbox" value="Modify" id="CheckModify"+cnt   /></td>' +

                    '<td style=\"WIDTH: 2%;text-align:center\"><input type="checkbox" value="Delete" id="CheckDelete"+cnt  /></td>' +

                    '<td><input type=text  id="Ben_1"></input></td>' +

                    '<td>' +

                    '<table id = "tbl'+row+'">' +

                    '<tr><td style=\"rowspan="2";vertical-align:top\">Add</td><td><input type="text" ><br><input type="text" ></td></tr>' +

                    '<tr><td>City</td><td><input type="text" ></td><td>St</td><td><input type="text" ></td></tr>' +

                    '<tr><td>Zip</td><td><input type="text"  ></td><td>country</td><td><input type="text" ></td></tr>' +

                    '</table>' +

                    '</td>' +

                    '<td><input type=text ></input></td>' +

                    '<td><input type=text ></input></td>' +

                    '<td><input type=text ></input></td>';
 
                }
 
                row++;

                //alert(row);

            }

Dec 4 '14 #5

neelmk

New Member

HI, all
i am now able to add row dynamically. But now i want to delete row from that table. starting from last row.
I am using jquery. But the problem is that, it is deleting row of the nested table . which i don't want.

my code is as follows

Expand|Select|Wrap|Line Numbers

 
$(document).ready(function () {
 
              $('#anc_rem').click(function () {

                  if ($('#dataTable tr').size() > 1) {

                      $('#dataTable tr:last-child').remove();

                  } else {

                      alert('One row should be present in table');

                  }

              });
 
          });

Dec 12 '14 #6

Exequiel

288

Contributor

instead of using last-child much better if you use this function "last()" or the ":last Selector".
example

Expand|Select|Wrap|Line Numbers

 $('#dataTable tr').last().remove();

or 

$("'#dataTable tr:last").remove();

try it.

Dec 14 '14 #7

neelmk

New Member

Hi all, I am facing a new problem. I have created a new table with Jquery.This table is a nested table. But the problem is first row is created . but after that new row is created under the nested table. I am attaching the code

Expand|Select|Wrap|Line Numbers

 
function AddTableRow() {

            var className = $('#dataTable tr:last-child').attr('class');

            alert(className);
 
            $('#dataTable tr.parentrow').last().after("<td style=\'WIDTH: 5%;text-align:center\'>" +

                          "<input type='radio' value='Add' id='RadioAdd" + row + "' name ='RadioAdd" + row + "' " +

                          "onclick='ProcessRadioEvent(this.id)' checked='checked'>" +

                          "</td>" +

                          "<td style=\'WIDTH: 5%\;text-align:center\'>" +

                          "<input type='radio' value='Modify' id='RadioModify" + row + "' name='RadioModify" + row + "' " +

                          "onclick='ProcessRadioEvent(this.id)' disabled='disabled'> " +

                          "</td>" +

                          "<td style=\'WIDTH: 5%;text-align:center\'>" +

                          "<input type='radio' value='Delete' id='RadioDelete" + row + "' " +

                          "name='RadioDelete" + row + "' disabled='disabled' onclick='ProcessRadioEvent(this.id)'>" +

                          "</td>" +

                          "<td style=\'width:15%'\>" +

                          "<input type=text style='width:300px' id='BenName" + row + "' " +

                          "name='BenName" + row + "' ></input>" +

                          "</td>" +

                          "<td style=\'width:50%'\>" +

                          "<table width=100%>" +

                          "<tr><td style=\'rowspan='1';colspan='1';vertical-align: top;text-align:left\'>St</td>" +

                          "<td style=\'text-align:left' colspan='3\'>" +

                          "<input type='text' style='width:99%' id='BenSt" + row + "' name='BenSt" + row + "'><br>" +

                          "<input type='text' style='width:99%' id='BenExAdd" + row + "' name='BenExAdd" + row + "'>" +

                          "</td></tr>" +

                          "<tr><td>City</td><td>" +

                          "<input type='text' id='BenCity" + row + "' name='BenCity" + row + "' ></td>" +

                          "<td>State</td><td>" +

                          "<input type='text' id='BenState" + row + "' name='BenState" + row + "'>" +

                          "</td></tr>" +

                          "<tr><td>Zip</td><td>" +

                          "<input type='text' class=\'numeric\' id='BenZip" + row + "'  name=id='BenZip" + row + "' " +

                          "onkeypress='if ( isNaN( String.fromCharCode(event.keyCode) )) return false;' maxlength='5'>" +

                          "</td>" +

                          "<td>country</td>" +

                          "<td>" +

                          "<input type='text' id='BenCountry" + row + "' name='BenCountry" + row + "' >" +

                          "</td></tr>" +

                          "</table>" +

                          "</td>" +

                          "<td style=\'width:10%'\>" +

                          "<input type=text placeholder='XXX-XX-1234' style='text-align:center;width:100px'  title='ssn'  " +

                          "id='BenSSN" + row + "' name='BenSSN" + row + "' maxlength='11' onchange='ValidateSSN(this.value,this.id);'>" +

                          "</input>" +

                          "</td>" +

                          "<td style=\'width:5%'\>" +

                          "<input type=text style='text-align:center;width:80px'  placeholder='mm/dd/yyyy' title='dob'" +

                          " id='BenDOB" + row + "' name='BenDOB" + row + "'  " +

                          "onchange='validatedate(this.value,this.id);' >" +

                          "</input>" +

                          "</td>" +

                          "<td style=\'width:10px'\>" +

                          "<input type=text CLASS='numeric' style='text-align:center;width:50px' onchange='CalculateShare();'" +

                          "id='BenSharePercentage" + row + "' " +

                          "name='BenSharePercentage" + row + "' " +

                          "onkeypress='if( isNaN(this.value + String.fromCharCode(event.keyCode) )) return false;' >" +

                          "</input></td>");
 
            $("#dataTable tr:last-child").addClass("parentrow");
 
            row++;

        }

value of row=2

Dec 22 '14 #8

dynamic table in Javascript /Jquery

Similar topics