AJAX

Dynamic Table Creation

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Mar 2008

Posts: 52

Reputation: clueless101 is an unknown quantity at this point

Solved Threads: 0

clueless101 clueless101 is offline

Offline

Junior Poster in Training

Dynamic Table Creation

Nov 18th, 2008

•

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?

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!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>
<!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>