khairulhasanmd/dynamic-row-html.html

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