I have some code that has a select list with values from 0-10 that when selected passes the selected value to a function that adds the correct # of rows to the table. The problem I'm having trouble with is replacing the existing table with the new table. Can anyone advise me the proper way to do this?
/**********************************/
Code below
/**********************************/
<html>
<head>
<script language="javascript">
/*
Trying to figure out how to remove previously added rows and
replace with new value
passed into function OR completely remove table if value is '0'.
*/
function AddRow(noRows)
{
var vTrgTbl = window.document.getElementById('rowTable');
var vSrcTbl = window.document.getElementById('Row1');
var i;
for (var i = 0; i < noRows; i++)
{
var vRow = vSrcTbl.lastChild.firstChild.cloneNode(true);
vTrgTbl.lastChild.appendChild(vRow);
}
}
</script>
</head>
<body>
<form method="post" name="testForm">
<table width="100%" border="0" cellspacing="0" cellpadding="2"
class="content">
<tr>
<td width="32%"> Total rows in table:</td>
<td width="68%">
<select name="rows" size="1"
onChange="AddRow(this.selectedIndex)">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
</tr>
</table><table width="100%" border="0" cellspacing="0"
cellpadding="2" class="content" id="rowTable">
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
<div style="visibility:hidden">
<table id="Row1">
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
<td>Relationship:</td>
<td><input type="text" name="relationship"></td>
<td>Age:</td>
<td><input type="text" name="age" size="3"></td>
</tr>
</table>
</div>
Before you post, read our: 
