By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,825 Members | 2,437 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,825 IT Pros & Developers. It's quick & easy.

dynamic table in Javascript /Jquery

P: 5
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
  1. <!DOCTYPE html>
  2. <head>
  3.     <title>Beneficiary Change Form</title>
  4.  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  6.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  7.     <script>
  8.         function AddRow() {
  9.             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>';
  10.         }
  11.         function RemoveRow() {
  12.             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>';
  13.         }
  14.  
  15.         function AddTableRow() {
  16.             $("#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>");
  17.         }
  18.  
  19.  
  20.     </script>
  21. </head>
  22.  
  23. <body style='text-align: center'>
  24.  
  25.     <input type='file' style='display: none;' id='inputfile' /><br />
  26.     <form name='BNFChangeForm' id='BNFChangeForm' method='POST' action=''>
  27.         <table style="text-align: center; width: 75%; padding-left: 150px;" border="0" id="">
  28.             <tr>
  29.                 <td style="text-align: center; font-size: x-large">Beneficiary Change Form
  30.                     <hr />
  31.                 </td>
  32.             </tr>
  33.             <tr>
  34.                 <td style="text-align: center">
  35.                     <b>Member Account Number : </b>9999999999 aaaaaaaaaa
  36.                 </td>
  37.             </tr>
  38.             <tr>
  39.                 <td style="text-align: left">
  40.                     <b>Select Share ID </b>
  41.                     <select style="width: 100px">
  42.                         <option>01</option>
  43.                         <option>02</option>
  44.                         <option>03</option>
  45.                         <option>04</option>
  46.                         <option>05</option>
  47.                     </select>
  48.                     <input type="submit" onclick="" id="BtnRefresh" value="Refresh" />
  49.                 </td>
  50.             </tr>
  51.             <tr>
  52.                 <td style="text-align: left">
  53.                     <br>
  54.                     <p style='font-size: large; font-weight: bold; text-align: left;'>
  55.                         Please review the updated beneficiary information below and sign in the space provided. If there are changes, 
  56.                         please note the correction and return the form to an Alliant Member Service Representative for processing. 
  57.                     </p>
  58.                 </td>
  59.             </tr>
  60.         </table>
  61.  
  62.         <div class="">
  63.             <div class="" id="chartRow;">
  64.                 <!-- <div style="text-align:right;width:90%">
  65.                     <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>
  66.                 </div>-->
  67.  
  68.                 <br>
  69.                 <table width="90%" id="dataTable" border="1">
  70.                     <tr>
  71.                         <td style="text-align: center; vertical-align: top">A</td>
  72.                         <td style="text-align: center; vertical-align: top">M</td>
  73.                         <td style="text-align: center; vertical-align: top">D</td>
  74.                         <td style="text-align: center; vertical-align: top">Beneficiary Name</td>
  75.                         <td style="text-align: center; vertical-align: top">Address</td>
  76.                         <td style="text-align: center; vertical-align: top">SSN</td>
  77.                         <td style="text-align: center; vertical-align: top">DOB</td>
  78.                         <td style="text-align: center; vertical-align: top">%</td>
  79.                     </tr>
  80.                     <tr>
  81.                         <td style="text-align: center; vertical-align: top">
  82.                             <input type="checkbox" checked="checked" /></td>
  83.                         <td style="text-align: center; vertical-align: top">
  84.                             <input type="checkbox" /></td>
  85.                         <td style="text-align: center; vertical-align: top">
  86.                             <input type="checkbox" /></td>
  87.                         <td style="text-align: center; vertical-align: top">Bill Hampe</td>
  88.                         <td style="text-align: center; vertical-align: top">12345 W. Carmichael Blvd.Rancho Cucamonga, CA 12345-6654</td>
  89.                         <td style="text-align: center; vertical-align: top">xxx-xx-1234</td>
  90.                         <td style="text-align: center; vertical-align: top">12/12/2014</td>
  91.                         <td style="text-align: center; vertical-align: top">50%</td>
  92.                     </tr>
  93.                     <tr>
  94.                         <td style="text-align: center; vertical-align: top">
  95.                             <input type="checkbox" /></td>
  96.                         <td style="text-align: center; vertical-align: top">
  97.                             <input type="checkbox" checked="checked" /></td>
  98.                         <td style="text-align: center; vertical-align: top">
  99.                             <input type="checkbox" /></td>
  100.                         <td style="text-align: center; vertical-align: top">Sandhya Gowravajhala</td>
  101.                         <td style="text-align: center; vertical-align: top">Trump Tower 2345 Northwestern Ave, Unit 213 Chicago, IL 60666-0945</td>
  102.                         <td style="text-align: center; vertical-align: top">xxx-xx-1234</td>
  103.                         <td style="text-align: center; vertical-align: top">12/12/2014</td>
  104.                         <td style="text-align: center; vertical-align: top">50%</td>
  105.                     </tr>
  106.  
  107.                 </table>
  108.             </div>
  109.         </div>
  110.         <div>
  111.             <table width="90%" border="0" id="Table1">
  112.                 <tr>
  113.                     <td style="text-align: right; padding-right: 0px" colspan="8">Total:
  114.                         <input type="text" readonly="readonly" value="100%" style='border-style: none' />
  115.                     </td>
  116.                 </tr>
  117.             </table>
  118.         </div>
  119.         <div style="text-align: right; width: 90%">
  120.             <input type="submit" onclick="" id="ButtonSubmit" value="Submit" />
  121.             <input type="button" onclick="javascript: void (0);" id="anc_add" value="Add Row" />
  122.             <input type="button" onclick="javascript: void (0);" id="anc_rem" value="Remove Row" />
  123.             <!--<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>-->
  124.             <br>
  125.         </div>
  126.         <!--  <table align='center' style='width: 75%'>
  127.             <tr>
  128.                 <td align='center'>
  129.                     <input id='btnValidate' type='submit' value='Validate' disabled='disabled' onclick='SetValidFlg(03)' />
  130.                     <input id='btnSubmit' type='submit' value='Submit' onclick='SetValidFlg(01)' />
  131.                     <input id='btnCancel' type='submit' value='Cancel' onclick='SetValidFlg(02)' />
  132.                 </td>
  133.             </tr>
  134.         </table>-->
  135.  
  136.         <script>
  137.             $(document).ready(function () {
  138.                 $(document).ready(function () {
  139.                     var cnt = 2;
  140.                     $("#anc_add").click(function () {
  141.                         $('#dataTable tr').last().after("<tr><td style=\"WIDTH: 2%;text-align:center\"><input type='checkbox' id='checkboxAdd' value='Add'/></td>" +
  142.                             "<td style=\"WIDTH: 2%\;text-align:center\"><input type='checkbox' id='CheckBoxModify' value='Modify'/></td>" +
  143.                             "<td style=\"WIDTH: 2%;text-align:center\"><input type='checkbox' id='CheckDelete' value='Delete'/></td>" +
  144.                             "<td style=\"WIDTH: 300px\"><input type=text id='TextBeneficiaryName' style=\"WIDTH: 300px\" ></input></td>" +
  145.                             "<td style=\"WIDTH: 300px\"><table id='"+cnt+"' border=0>" +
  146.                             "<tr><td style=\"rowspan='2';vertical-align:top\">Add</td><td ><input type='text'><br><input type='text'></td></tr>" +
  147.                             "<tr><td>City</td><td><input type='text'></td><td>St</td><td><input type='text'></td></tr>" +
  148.                             "<tr><td>Zip</td><td><input type='text'></td><td>country</td><td><input type='text'></td></tr>" +
  149.                             "</table></td>" +
  150.                             "<td style=\"WIDTH: 100px\"><input type=text id='TextSSN' style=\"WIDTH:100px\"></input></td>" +
  151.                             "<td style=\"WIDTH: 100px\"><input type=text id='TextDob' style=\"WIDTH: 100px\"></input></td>" +
  152.                             "<td style=\"WIDTH: 100px\"><input type=text id='TextPercentage' style=\"WIDTH: 100px\" class = \"numeric\"></input></td></tr>");
  153.                         //var x = 'Table"+cnt+"';
  154.                         //alert(x);
  155.                         cnt++;
  156.                     });
  157.  
  158.                     $("#anc_rem").click(function () {
  159.                         if ($('#dataTable tr').size() > 1) {
  160.                             $('#dataTable tr:last-child').remove();
  161.                         } else {
  162.                             alert('One row should be present in table');
  163.                         }
  164.                     });
  165.  
  166.                 });
  167.             });
  168.  
  169.             var specialKeys = new Array();
  170.             specialKeys.push(8); //Backspace
  171.             $(function () {
  172.                 $(".numeric").bind("keypress", function (e) {
  173.                     var keyCode = e.which ? e.which : e.keyCode;
  174.                     var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
  175.                     $(".error").css("display", ret ? "none" : "inline");
  176.                     return ret;
  177.                 });
  178.                 $(".numeric").bind("paste", function (e) {
  179.                     return false;
  180.                 });
  181.                 $(".numeric").bind("drop", function (e) {
  182.                     return false;
  183.                 });
  184.             });
  185.  
  186.  
  187.         </script>
  188.     </form>
  189. </body>
  190. </!>
Dec 1 '14 #1
Share this Question
Share on Google+
7 Replies


Claus Mygind
100+
P: 571
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
  1. <!DOCTYPE html>
  2. <head>
  3.     <title>Beneficiary Change Form</title>
  4.  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  6.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  7.     <script>
  8.         function AddRow() {
  9.             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>';
  10.         }
  11.         function RemoveRow() {
  12.             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>';
  13.         }
  14.  
  15.         function AddTableRow() {
  16.             $("#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>");
  17.         }
  18.  
  19.  
  20.     </script>
  21. </head>
  22.  
  23. <body style='text-align: center'>
  24.  
  25.     <input type='file' style='display: none;' id='inputfile' /><br />
  26.     <form name='BNFChangeForm' id='BNFChangeForm' method='POST' action=''>
  27.         <table style="text-align: center; width: 75%; padding-left: 150px;" border="0" id="">
  28.             <tr>
  29.                 <td style="text-align: center; font-size: x-large">Beneficiary Change Form
  30.                     <hr />
  31.                 </td>
  32.             </tr>
  33.             <tr>
  34.                 <td style="text-align: center">
  35.                     <b>Member Account Number : </b>9999999999 aaaaaaaaaa
  36.                 </td>
  37.             </tr>
  38.             <tr>
  39.                 <td style="text-align: left">
  40.                     <b>Select Share ID </b>
  41.                     <select style="width: 100px">
  42.                         <option>01</option>
  43.                         <option>02</option>
  44.                         <option>03</option>
  45.                         <option>04</option>
  46.                         <option>05</option>
  47.                     </select>
  48.                     <input type="submit" onclick="" id="BtnRefresh" value="Refresh" />
  49.                 </td>
  50.             </tr>
  51.             <tr>
  52.                 <td style="text-align: left">
  53.                     <br>
  54.                     <p style='font-size: large; font-weight: bold; text-align: left;'>
  55.                         Please review the updated beneficiary information below and sign in the space provided. If there are changes,
  56.                         please note the correction and return the form to an Alliant Member Service Representative for processing.
  57.                     </p>
  58.                 </td>
  59.             </tr>
  60.         </table>
  61.  
  62.         <div class="">
  63.             <div class="" id="chartRow;">
  64.                 <!-- <div style="text-align:right;width:90%">
  65.                 <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>
  66.                 </div>-->
  67.  
  68.                 <br>
  69.                 <table width="90%" id="dataTable" border="1">
  70.                     <tr>
  71.                         <td style="text-align: center; vertical-align: top">A</td>
  72.                         <td style="text-align: center; vertical-align: top">M</td>
  73.                         <td style="text-align: center; vertical-align: top">D</td>
  74.                         <td style="text-align: center; vertical-align: top">Beneficiary Name</td>
  75.                         <td style="text-align: center; vertical-align: top">Address</td>
  76.                         <td style="text-align: center; vertical-align: top">SSN</td>
  77.                         <td style="text-align: center; vertical-align: top">DOB</td>
  78.                         <td style="text-align: center; vertical-align: top">%</td>
  79.                     </tr>
  80.                     <tr>
  81.                         <td style="text-align: center; vertical-align: top">
  82.                             <input type="checkbox" checked="checked" /></td>
  83.                         <td style="text-align: center; vertical-align: top">
  84.                             <input type="checkbox" /></td>
  85.                         <td style="text-align: center; vertical-align: top">
  86.                             <input type="checkbox" /></td>
  87.                         <td style="text-align: center; vertical-align: top">Bill Hampe</td>
  88.                         <td style="text-align: center; vertical-align: top">12345 W. Carmichael Blvd.Rancho Cucamonga, CA 12345-6654</td>
  89.                         <td style="text-align: center; vertical-align: top">xxx-xx-1234</td>
  90.                         <td style="text-align: center; vertical-align: top">12/12/2014</td>
  91.                         <td style="text-align: center; vertical-align: top">50%</td>
  92.                     </tr>
  93.                     <tr>
  94.                         <td style="text-align: center; vertical-align: top">
  95.                             <input type="checkbox" /></td>
  96.                         <td style="text-align: center; vertical-align: top">
  97.                             <input type="checkbox" checked="checked" /></td>
  98.                         <td style="text-align: center; vertical-align: top">
  99.                             <input type="checkbox" /></td>
  100.                         <td style="text-align: center; vertical-align: top">Sandhya Gowravajhala</td>
  101.                         <td style="text-align: center; vertical-align: top">Trump Tower 2345 Northwestern Ave, Unit 213 Chicago, IL 60666-0945</td>
  102.                         <td style="text-align: center; vertical-align: top">xxx-xx-1234</td>
  103.                         <td style="text-align: center; vertical-align: top">12/12/2014</td>
  104.                         <td style="text-align: center; vertical-align: top">50%</td>
  105.                     </tr>
  106.  
  107.                 </table>
  108.             </div>
  109.         </div>
  110.         <div>
  111.             <table width="90%" border="0" id="Table1">
  112.                 <tr>
  113.                     <td style="text-align: right; padding-right: 0px" colspan="8">Total:
  114.                         <input type="text" readonly="readonly" value="100%" style='border-style: none' />
  115.                     </td>
  116.                 </tr>
  117.             </table>
  118.         </div>
  119.         <div style="text-align: right; width: 90%">
  120.             <input type="submit" onclick="" id="ButtonSubmit" value="Submit" />
  121.             <input type="button" onclick="javascript: void (0);" id="anc_add" value="Add Row" />
  122.             <input type="button" onclick="javascript: void (0);" id="anc_rem" value="Remove Row" />
  123.             <!--<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>-->
  124.             <br>
  125.         </div>
  126.         <!-- <table align='center' style='width: 75%'>
  127.         <tr>
  128.         <td align='center'>
  129.         <input id='btnValidate' type='submit' value='Validate' disabled='disabled' onclick='SetValidFlg(03)' />
  130.         <input id='btnSubmit' type='submit' value='Submit' onclick='SetValidFlg(01)' />
  131.         <input id='btnCancel' type='submit' value='Cancel' onclick='SetValidFlg(02)' />
  132.         </td>
  133.         </tr>
  134.         </table>-->
  135.  
  136.         <script>
  137.             $(document).ready(function () {
  138.                 $(document).ready(function () {
  139.                     var cnt = 2;
  140.                     $("#anc_add").click(function () {
  141.                         $('#dataTable tr').last().after("<tr><td style=\"WIDTH: 2%;text-align:center\"><input type='checkbox' id='checkboxAdd' value='Add'/></td>" +
  142.                         "<td style=\"WIDTH: 2%\;text-align:center\"><input type='checkbox' id='CheckBoxModify' value='Modify'/></td>" +
  143.                         "<td style=\"WIDTH: 2%;text-align:center\"><input type='checkbox' id='CheckDelete' value='Delete'/></td>" +
  144.                         "<td style=\"WIDTH: 300px\"><input type=text id='TextBeneficiaryName' style=\"WIDTH: 300px\" ></input></td>" +
  145.                         "<td style=\"WIDTH: 300px\"><table id='"+cnt+"' border=0>" +
  146.                         "<tr><td style=\"rowspan='2';vertical-align:top\">Add</td><td ><input type='text'><br><input type='text'></td></tr>" +
  147.                         "<tr><td>City</td><td><input type='text'></td><td>St</td><td><input type='text'></td></tr>" +
  148.                         "<tr><td>Zip</td><td><input type='text'></td><td>country</td><td><input type='text'></td></tr>" +
  149.                         "</table></td>" +
  150.                         "<td style=\"WIDTH: 100px\"><input type=text id='TextSSN' style=\"WIDTH:100px\"></input></td>" +
  151.                         "<td style=\"WIDTH: 100px\"><input type=text id='TextDob' style=\"WIDTH: 100px\"></input></td>" +
  152.                         "<td style=\"WIDTH: 100px\"><input type=text id='TextPercentage' style=\"WIDTH: 100px\" class = \"numeric\"></input></td></tr>");
  153.                         //var x = 'Table"+cnt+"';
  154.                         //alert(x);
  155.                         cnt++;
  156.                     });
  157.  
  158.                     $("#anc_rem").click(function () {
  159.                         if ($('#dataTable tr').size() > 1) {
  160.                             $('#dataTable tr:last-child').remove();
  161.                         } else {
  162.                             alert('One row should be present in table');
  163.                         }
  164.                     });
  165.  
  166.                 });
  167.             });
  168.  
  169.             var specialKeys = new Array();
  170.             specialKeys.push(8); //Backspace
  171.             $(function () {
  172.  
  173.                 $(".numeric").bind("keypress", function (e) {
  174.                     var keyCode = e.which ? e.which : e.keyCode;
  175.                     var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
  176.                     $(".error").css("display", ret ? "none" : "inline");
  177.                         return ret;
  178.                 });
  179.  
  180.                 $(".numeric").bind("paste", function (e) {
  181.                     return false;
  182.                 });
  183.  
  184.                 $(".numeric").bind("drop", function (e) {
  185.                     return false;
  186.                 });
  187.             });
  188.         </script>
  189.     </form>
  190. </body>
  191. </!> 
  192.  
Dec 1 '14 #2

Exequiel
100+
P: 287
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

P: 5
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
  1. var row=2;
  2.  function AddRow() {
  3.  
  4.             document.getElementById("dataTable").insertRow(-1).innerHTML = '' +
  5.                 '<td style=\"WIDTH: 2%;text-align:center\"><input type="checkbox"  value="Add" id="c"+row+"" /></td>' +
  6.                 '<td style=\"WIDTH: 2%\;text-align:center\"><input type="checkbox" value="Modify" id="CheckModify"+cnt   /></td>' +
  7.                 '<td style=\"WIDTH: 2%;text-align:center\"><input type="checkbox" value="Delete" id="CheckDelete"+cnt  /></td>' +
  8.                 '<td><input type=text  id="Ben_1"></input></td>' +
  9.                 '<td>' +
  10.                 '<table>' +
  11.                 '<tr><td style=\"rowspan="2";vertical-align:top\">Add</td><td><input type="text" ><br><input type="text" ></td></tr>' +
  12.                 '<tr><td>City</td><td><input type="text" ></td><td>St</td><td><input type="text" ></td></tr>' +
  13.                 '<tr><td>Zip</td><td><input type="text"  ></td><td>country</td><td><input type="text" ></td></tr>' +
  14.                 '</table>' +
  15.                 '</td>' +
  16.                 '<td><input type=text ></input></td>' +
  17.                 '<td><input type=text ></input></td>' +
  18.                 '<td><input type=text ></input></td>';
  19.  
  20.             }
  21.  
  22.             row++;
  23.             //alert(row);
  24.         }
  25.  
Dec 4 '14 #4

Claus Mygind
100+
P: 571
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
  1.  
  2.  
  3.     var row=2;
  4.      function AddRow() {
  5.  
  6.                 document.getElementById("dataTable").insertRow(-1).innerHTML = '' +
  7.                     '<td style=\"WIDTH: 2%;text-align:center\"><input type="checkbox"  value="Add" id="c"+row+"" /></td>' +
  8.                     '<td style=\"WIDTH: 2%\;text-align:center\"><input type="checkbox" value="Modify" id="CheckModify"+cnt   /></td>' +
  9.                     '<td style=\"WIDTH: 2%;text-align:center\"><input type="checkbox" value="Delete" id="CheckDelete"+cnt  /></td>' +
  10.                     '<td><input type=text  id="Ben_1"></input></td>' +
  11.                     '<td>' +
  12.                     '<table id = "tbl'+row+'">' +
  13.                     '<tr><td style=\"rowspan="2";vertical-align:top\">Add</td><td><input type="text" ><br><input type="text" ></td></tr>' +
  14.                     '<tr><td>City</td><td><input type="text" ></td><td>St</td><td><input type="text" ></td></tr>' +
  15.                     '<tr><td>Zip</td><td><input type="text"  ></td><td>country</td><td><input type="text" ></td></tr>' +
  16.                     '</table>' +
  17.                     '</td>' +
  18.                     '<td><input type=text ></input></td>' +
  19.                     '<td><input type=text ></input></td>' +
  20.                     '<td><input type=text ></input></td>';
  21.  
  22.                 }
  23.  
  24.                 row++;
  25.                 //alert(row);
  26.             }
  27.  
  28.  
  29.  
Dec 4 '14 #5

P: 5
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
  1. $(document).ready(function () {
  2.  
  3.               $('#anc_rem').click(function () {
  4.                   if ($('#dataTable tr').size() > 1) {
  5.                       $('#dataTable tr:last-child').remove();
  6.                   } else {
  7.                       alert('One row should be present in table');
  8.                   }
  9.               });
  10.  
  11.           });
  12.  
Dec 12 '14 #6

Exequiel
100+
P: 287
instead of using last-child much better if you use this function "last()" or the ":last Selector".
example
Expand|Select|Wrap|Line Numbers
  1. $('#dataTable tr').last().remove();
  2. or 
  3. $("'#dataTable tr:last").remove();
try it.
Dec 14 '14 #7

P: 5
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
  1. function AddTableRow() {
  2.             var className = $('#dataTable tr:last-child').attr('class');
  3.             alert(className);
  4.  
  5.             $('#dataTable tr.parentrow').last().after("<td style=\'WIDTH: 5%;text-align:center\'>" +
  6.                           "<input type='radio' value='Add' id='RadioAdd" + row + "' name ='RadioAdd" + row + "' " +
  7.                           "onclick='ProcessRadioEvent(this.id)' checked='checked'>" +
  8.                           "</td>" +
  9.                           "<td style=\'WIDTH: 5%\;text-align:center\'>" +
  10.                           "<input type='radio' value='Modify' id='RadioModify" + row + "' name='RadioModify" + row + "' " +
  11.                           "onclick='ProcessRadioEvent(this.id)' disabled='disabled'> " +
  12.                           "</td>" +
  13.                           "<td style=\'WIDTH: 5%;text-align:center\'>" +
  14.                           "<input type='radio' value='Delete' id='RadioDelete" + row + "' " +
  15.                           "name='RadioDelete" + row + "' disabled='disabled' onclick='ProcessRadioEvent(this.id)'>" +
  16.                           "</td>" +
  17.                           "<td style=\'width:15%'\>" +
  18.                           "<input type=text style='width:300px' id='BenName" + row + "' " +
  19.                           "name='BenName" + row + "' ></input>" +
  20.                           "</td>" +
  21.                           "<td style=\'width:50%'\>" +
  22.                           "<table width=100%>" +
  23.                           "<tr><td style=\'rowspan='1';colspan='1';vertical-align: top;text-align:left\'>St</td>" +
  24.                           "<td style=\'text-align:left' colspan='3\'>" +
  25.                           "<input type='text' style='width:99%' id='BenSt" + row + "' name='BenSt" + row + "'><br>" +
  26.                           "<input type='text' style='width:99%' id='BenExAdd" + row + "' name='BenExAdd" + row + "'>" +
  27.                           "</td></tr>" +
  28.                           "<tr><td>City</td><td>" +
  29.                           "<input type='text' id='BenCity" + row + "' name='BenCity" + row + "' ></td>" +
  30.                           "<td>State</td><td>" +
  31.                           "<input type='text' id='BenState" + row + "' name='BenState" + row + "'>" +
  32.                           "</td></tr>" +
  33.                           "<tr><td>Zip</td><td>" +
  34.                           "<input type='text' class=\'numeric\' id='BenZip" + row + "'  name=id='BenZip" + row + "' " +
  35.                           "onkeypress='if ( isNaN( String.fromCharCode(event.keyCode) )) return false;' maxlength='5'>" +
  36.                           "</td>" +
  37.                           "<td>country</td>" +
  38.                           "<td>" +
  39.                           "<input type='text' id='BenCountry" + row + "' name='BenCountry" + row + "' >" +
  40.                           "</td></tr>" +
  41.                           "</table>" +
  42.                           "</td>" +
  43.                           "<td style=\'width:10%'\>" +
  44.                           "<input type=text placeholder='XXX-XX-1234' style='text-align:center;width:100px'  title='ssn'  " +
  45.                           "id='BenSSN" + row + "' name='BenSSN" + row + "' maxlength='11' onchange='ValidateSSN(this.value,this.id);'>" +
  46.                           "</input>" +
  47.                           "</td>" +
  48.                           "<td style=\'width:5%'\>" +
  49.                           "<input type=text style='text-align:center;width:80px'  placeholder='mm/dd/yyyy' title='dob'" +
  50.                           " id='BenDOB" + row + "' name='BenDOB" + row + "'  " +
  51.                           "onchange='validatedate(this.value,this.id);' >" +
  52.                           "</input>" +
  53.                           "</td>" +
  54.                           "<td style=\'width:10px'\>" +
  55.                           "<input type=text CLASS='numeric' style='text-align:center;width:50px' onchange='CalculateShare();'" +
  56.                           "id='BenSharePercentage" + row + "' " +
  57.                           "name='BenSharePercentage" + row + "' " +
  58.                           "onkeypress='if( isNaN(this.value + String.fromCharCode(event.keyCode) )) return false;' >" +
  59.                           "</input></td>");
  60.  
  61.             $("#dataTable tr:last-child").addClass("parentrow");
  62.  
  63.             row++;
  64.         }
  65. value of row=2
  66.  
Dec 22 '14 #8

Post your reply

Sign in to post your reply or Sign up for a free account.