khairulhasanmd · December 24, 2015 12:00
diff --git a/dynamic-row-html.html b/dynamic-row-html.html
 for php processing in server side: 
  http://stackoverflow.com/questions/3314567/how-to-get-form-input-array-into-php-array

 <!DOCTYPE html>
 <html>
 <head>
    <title>HTML dynamic table using JavaScript</title>
    <script type="text/javascript">
 	function addRow() {
    var myName = document.getElementById("name");
    var age = document.getElementById("age");
    var tableRef = document.getElementById('myTableData').getElementsByTagName('tbody')[0];
 	var newRow   = tableRef.insertRow(tableRef.rows.length);
    var rowCount = tableRef.rows.length;
    newRow.insertCell(0).innerHTML= myName.value+'<input type="hidden" id="name'+rowCount+'" name="name[]" value="'+myName.value+'" >';
    newRow.insertCell(1).innerHTML= quantity.value+'<input type="hidden" id="quantity'+rowCount+'" name="quantity[]" value="'+quantity.value+'" >';
 	newRow.insertCell(2).innerHTML= price.value+'<input type="hidden" id="price'+rowCount+'" name="price[]" value="'+price.value+'" >';
 	newRow.insertCell(3).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
 	updateTotal();
 }

 function updateTotal(){
 	document.getElementById("totalQuantity").innerHTML = '<b>'+getInputArrayTotal('myFormId', 'quantity[]')+'</b>';
 	document.getElementById("totalPrice").innerHTML = '<b>'+getInputArrayTotal('myFormId', 'price[]')+'</b>';
 }

 function getInputArrayTotal(formID, inputName){
 	var inputArray = document.querySelectorAll("#"+formID+" input[name='"+inputName+"']");
 	var QuantityLength = inputArray.length;
 	var totalQuantity = 0;
 	for( var i = 0; i < QuantityLength; i++ ){
 		try{
 			totalQuantity +=  parseInt(inputArray[i].value,10);
 		} catch( error ) { alert(error);}
 	}
 	return totalQuantity;
 }

 function deleteRow(obj) {
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
 	updateTotal();
 }

 function addTable() {
     
    var myTableDiv = document.getElementById("myDynamicTable");
     
    var table = document.createElement('TABLE');
    table.border='1';
   
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
     
    for (var i=0; i<3; i++){
       var tr = document.createElement('TR');
       tableBody.appendChild(tr);
      
       for (var j=0; j<4; j++){
           var td = document.createElement('TD');
           td.width='75';
           td.appendChild(document.createTextNode("Cell " + i + "," + j));
           tr.appendChild(td);
       }
    }
    myTableDiv.appendChild(table);
   
 }

 function calculateTotal(obj) {
    console.log(obj);
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
 }

 function load() {
   
    console.log("Page load finished");

 }

 	</script>
 </head>
 <body onload="load()">
 <div id="myform">
 <b>Simple form with name and age ...</b>
 <table>
    <tr>
        <td>Name:</td>
        <td><input type="text" id="name"></td>
    </tr>
 	<tr>
        <td>Quantity:</td>
        <td><input type="text" id="quantity"></td>
    </tr>
    <tr>
        <td>Price:</td>
        <td><input type="text" id="price">
 		
        <input type="button" id="add" value="Add" onclick="Javascript:addRow()"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
 </table>
 </div>
 <div id="mydata">
 <b>Current data in the system ...</b>
 <form name="myForm" id="myFormId" method="post">
 	<table id="myTableData"  border="1" cellpadding="2">
 		<thead>
 			<tr>
 				<th><b>Name</b></th>
 				<th><b>Quantity</b></th>
 				<th><b>Price</b></th>
 				<th><b>Operation</b></th>
 			</tr>
 		</thead>
 		<tbody>

 		</tbody>
 		<tfoot>
 			<tr>
 				<td><b>Total</b></td>
 				<td id="totalQuantity"><b>00</b></td>
 				<td id="totalPrice"><b>00</b></td>
 				<td><b>--</b></td>
 			</tr>
 		</tfoot>
 	</table>
 </form>
 &nbsp;<br/>
 </div>
 <div id="myDynamicTable">
 <input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
 to create a Table and add some data using JavaScript
 </div>
 </body>
 </html>
	for php processing in server side:
	http://stackoverflow.com/questions/3314567/how-to-get-form-input-array-into-php-array

	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML dynamic table using JavaScript</title>
	<script type="text/javascript">
	function addRow() {
	var myName = document.getElementById("name");
	var age = document.getElementById("age");
	var tableRef = document.getElementById('myTableData').getElementsByTagName('tbody')[0];
	var newRow = tableRef.insertRow(tableRef.rows.length);
	var rowCount = tableRef.rows.length;
	newRow.insertCell(0).innerHTML= myName.value+'<input type="hidden" id="name'+rowCount+'" name="name[]" value="'+myName.value+'" >';
	newRow.insertCell(1).innerHTML= quantity.value+'<input type="hidden" id="quantity'+rowCount+'" name="quantity[]" value="'+quantity.value+'" >';
	newRow.insertCell(2).innerHTML= price.value+'<input type="hidden" id="price'+rowCount+'" name="price[]" value="'+price.value+'" >';
	newRow.insertCell(3).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
	updateTotal();
	}

	function updateTotal(){
	document.getElementById("totalQuantity").innerHTML = '<b>'+getInputArrayTotal('myFormId', 'quantity[]')+'</b>';
	document.getElementById("totalPrice").innerHTML = '<b>'+getInputArrayTotal('myFormId', 'price[]')+'</b>';
	}

	function getInputArrayTotal(formID, inputName){
	var inputArray = document.querySelectorAll("#"+formID+" input[name='"+inputName+"']");
	var QuantityLength = inputArray.length;
	var totalQuantity = 0;
	for( var i = 0; i < QuantityLength; i++ ){
	try{
	totalQuantity += parseInt(inputArray[i].value,10);
	} catch( error ) { alert(error);}
	}
	return totalQuantity;
	}

	function deleteRow(obj) {
	var index = obj.parentNode.parentNode.rowIndex;
	var table = document.getElementById("myTableData");
	table.deleteRow(index);
	updateTotal();
	}

	function addTable() {

	var myTableDiv = document.getElementById("myDynamicTable");

	var table = document.createElement('TABLE');
	table.border='1';

	var tableBody = document.createElement('TBODY');
	table.appendChild(tableBody);

	for (var i=0; i<3; i++){
	var tr = document.createElement('TR');
	tableBody.appendChild(tr);

	for (var j=0; j<4; j++){
	var td = document.createElement('TD');
	td.width='75';
	td.appendChild(document.createTextNode("Cell " + i + "," + j));
	tr.appendChild(td);
	}
	}
	myTableDiv.appendChild(table);

	}

	function calculateTotal(obj) {
	console.log(obj);
	var index = obj.parentNode.parentNode.rowIndex;
	var table = document.getElementById("myTableData");
	table.deleteRow(index);
	}

	function load() {

	console.log("Page load finished");

	}

	</script>
	</head>
	<body onload="load()">
	<div id="myform">
	<b>Simple form with name and age ...</b>
	<table>
	<tr>
	<td>Name:</td>
	<td><input type="text" id="name"></td>
	</tr>
	<tr>
	<td>Quantity:</td>
	<td><input type="text" id="quantity"></td>
	</tr>
	<tr>
	<td>Price:</td>
	<td><input type="text" id="price">

	<input type="button" id="add" value="Add" onclick="Javascript:addRow()"></td>
	</tr>
	<tr>
	<td> </td>
	<td> </td>
	</tr>
	</table>
	</div>
	<div id="mydata">
	<b>Current data in the system ...</b>
	<form name="myForm" id="myFormId" method="post">
	<table id="myTableData" border="1" cellpadding="2">
	<thead>
	<tr>
	<th><b>Name</b></th>
	<th><b>Quantity</b></th>
	<th><b>Price</b></th>
	<th><b>Operation</b></th>
	</tr>
	</thead>
	<tbody>

	</tbody>
	<tfoot>
	<tr>
	<td><b>Total</b></td>
	<td id="totalQuantity"><b>00</b></td>
	<td id="totalPrice"><b>00</b></td>
	<td><b>--</b></td>
	</tr>
	</tfoot>
	</table>
	</form>
	<br/>
	</div>
	<div id="myDynamicTable">
	<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
	to create a Table and add some data using JavaScript
	</div>
	</body>
	</html>