dynamic table in Javascript /Jquery

**Claus Mygind** · Dec 1 '14, 03:52 PM

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.

Code:

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

**Exequiel** · Dec 4 '14, 03:41 AM

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

**neelmk** · Dec 4 '14, 06:26 AM

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

Code:

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);
        }

**Claus Mygind** · Dec 4 '14, 07:54 PM

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

Code:


    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[B][I] id = "tbl'+row+'"[/I][/B]>' +
                    '<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);
            }

**neelmk** · Dec 12 '14, 07:58 AM

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

Code:

$(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');
                  }
              });

          });

**Exequiel** · Dec 14 '14, 02:56 AM

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

Code:

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

try it.

**neelmk** · Dec 22 '14, 06:21 AM

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

Code:

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

dynamic table in Javascript /Jquery

dynamic table in Javascript /Jquery

Comment

Comment

Comment

Comment

Comment

Comment

Comment