Hi,
The problem is in your save button.
After adding rows into the table page gets reloaded ,due to this you are not able to see the changes in the table.
use below code and replace your button control with below:
SCRIPT:
<script type="text/javascript">
function addRow() {
var table = document.getElementById('myTable');
var columnLength = table.getElementsByTagName('tr')[0].children.length;
var units = document.getElementsByClassName('unit-table');
var tr = document.createElement('tr');
tr.className = 'unit-table';
for (var i = 0; i < columnLength; i++) {
var td = document.createElement('td');
var text = document.createElement('input');
text.type = 'text';
text.id = 'text' + i;
if (i == 0) {
text.value = document.getElementById('name_input').value;
} else if (i == 1) {
text.value = document.getElementById('email').value;
} else if (i == 2) {
text.value = document.getElementById('city').value;
}
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
</script>
html part:
<table id="myTable" border="1" cellpadding="5" cellspacing="5"><tbody><tr class="unit-table"><td> Full name:
</td><td> Email:
</td><td> City:
</td></tr></tbody></table>
Save button code:
<input id="Button1" type="button" value="button" onclick="addRow();"/>