Once my dynamic table is populated with names entered by user, it should no longer include the initial text: Your name list is empty.
Can anyone help me with this final code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Dynamic Table</title>
<script type ="text/javascript">
//This fx adds a new row to the name table and inserts 1st cell with text box and 2nd cell with remove button
function addRow(item1) {
var newRow = document.getElementById("nameTable").insertRow();
var newCell = newRow.insertCell();
newCell.innerHTML = "<input type='text' name='tableList' value='" + item1 + "'> <input type='button' value='Remove Name' onclick='removeRow(this);'/>";
}
//This fx deletes unwanted name lines
function removeRow(src) {
if (document.getElementById("nameTable").rows.length >1) {
var dRow = src.parentElement.parentElement;
}else {
document.getElement.ById("nameTable").rows[0].innerHTML = "<td>Your name list is empty</td>";
}
//once the row reference is obtained, delete it passing in its rowIndex
document.getElementById("nameTable").deleteRow(dRow.rowIndex);
}
</script>
</head>
<body>
<form action="get">
<p><strong>Enter name to be included in Name List:</strong></p>
<input type="text" name="input"/><input type="button" value="Add Name" onclick="addRow(this.form.input.value)" />
</form>
<form>
<h1>Name List</h1>
<table id="nameTable" border="5">
<tr>
<td>Your name list is empty
</td>
</tr>
</form>
</table>
</form>
</body>
</html>