DaniWeb IT Discussion Community - Dynamic Table Creation

Quote:

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 + "'>&nbsp;&nbsp;<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>