With Below Script you can easily add user inserted date in table (<tr><td>) format using Javascript Code.
<!DOCTYPE html>
<html>
<body>
<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>Age:</td>
<td><input type="text" id="age">
<input type="button" id="add" value="Add" onclick="myFunction()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Name</b></td>
<td><b>Age</b></td>
</tr>
</table>
</div>
<script type="text/javascript">
function myFunction() {
var myName = document.getElementById("name");
var age = document.getElementById("age");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;
}
function deleteRow(obj) {
console.log(obj);
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
</script>
</body>
</html>
0 Comments