I got the code working, however, when I've deleted a row, the row index is wrong.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function addRowToTable(tblID)
{
var tbl = document.getElementById(tblID);
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
switch (tblID)
{
case 'family':
{
// 1st cell
var cell1 = row.insertCell(0);
var famName = document.createElement('input');
famName.setAttribute('type', 'text');
famName.setAttribute('name', 'FamFullName' + iteration);
famName.setAttribute('size', '20');
cell1.appendChild(famName);
// 2nd cell
var cell2 = row.insertCell(1);
var dob = document.createElement('input');
dob.setAttribute('type', 'text');
dob.setAttribute('name', 'FamDOB' + iteration);
dob.setAttribute('size', '20');
cell2.appendChild(dob);
//3rd cell
var cell3 = row.insertCell(2);
var famRel = document.createElement('input');
famRel.setAttribute('type', 'select');
famRel.option = document.forms[0].FamRelationship.option;
famRel.setAttribute('name', 'FamRelationship' + iteration);
cell3.appendChild(famRel);
//4th cell
var cell4 = row.insertCell(3);
var famCom = document.createElement('input');
famCom.setAttribute('type', 'text');
famCom.setAttribute('name', 'FamComment' + iteration);
famCom.setAttribute('size', '20');
cell4.appendChild(famCom);
//5th cell
var cell5 = row.insertCell(4);
var fdelBtn = document.createElement('input');
fdelBtn.setAttribute('type', 'button');
fdelBtn.setAttribute('name', 'del' + iteration);
fdelBtn.setAttribute('value', 'Delete');
fdelBtn.onclick = function() {deleteRow(iteration, 'family')};
cell5.appendChild(fdelBtn);
}
break;
case 'asso':
{
// 1st cell
var cell1 = row.insertCell(0);
var AssoName = document.createElement('input');
AssoName.setAttribute('type', 'text');
AssoName.setAttribute('name', 'AssoFullName' + iteration);
AssoName.setAttribute('size', '20');
cell1.appendChild(AssoName);
// 2nd cell
var cell2 = row.insertCell(1);
var aRel = document.createElement('input');
aRel.setAttribute('type', 'text');
aRel.setAttribute('name', 'AssoRelationship' + iteration);
aRel.setAttribute('size', '20');
cell2.appendChild(aRel);
//3rd cell
var cell3 = row.insertCell(2);
var assoCom = document.createElement('input');
assoCom.setAttribute('type', 'text');
assoCom.setAttribute('name', 'AssoComments' + iteration);
assoCom.setAttribute('size', '20');
cell3.appendChild(assoCom);
//4th cell
var cell4 = row.insertCell(3);
var adelBtn = document.createElement('input');
adelBtn.setAttribute('type', 'button');
adelBtn.setAttribute('name', 'adelBtn' + iteration);
adelBtn.setAttribute('value', 'Delete');
adelBtn.onclick = function() {deleteRow(iteration, 'asso')};
cell4.appendChild(adelBtn);
}
break;
case 'default':
{}
}
}
function deleteRow(i, tblID)
{
var tbl = document.getElementById(tblID);
var lastRow = tbl.rows.length;
alert('b4 del: ' + lastRow + '\nrow to del: ' + i)
if (confirm('Are you sure you want to delete this row?'))
{
if (i <= lastRow)
tbl.deleteRow(i);
else
tbl.deleteRow(this.parentNode.parentNode.rowIndex);
}
lastRow = tbl.rows.length;
alert('after del: ' + lastRow)
}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<table id=family>
<tr>
<th id="normHeader">Full Name</th>
<th id="normHeader">Date of Birth</th>
<th id="normHeader">Relationship</th>
<th id="normHeader">Comments</th>
<td>
<input type="button" onclick="addRowToTable('family');" value="Add"> </td>
</tr>
<tr>
<td>
<input name="FamFullName" value=""></td>
<td>
<input name="FamDOB" value=""></td>
<td>
<select name="FamRelationship">
<option>- Please Select -
<option>Father
<option>Mother
<option>Sister
<option>Brother
<option>Son
<option>Daughter</select>
</td>
<td>
<input name="FamComments" value=""></a></td>
</tr>
</table>
<hr>
<h4>Associated Personalities</h4>
<table id=asso>
<tr id=arow0>
<th id="normHeader">Full Name</th>
<th id="normHeader">Relationship</th>
<th id="normHeader">Comments</th>
<td>
<input type="button" onclick="addRowToTable('asso');" value="Add"> </td>
</tr>
<tr id=arow1>
<td>
<input name="AssoFullName" value=""></td>
<td>
<input name="AssoRelationship" value=""></td>
<td>
<input name="AssoComments" value=""></td>
</td>
</table>
</body>
</html>
After I delete the row, how do I re-iterate the row indexes again?
Or do I append and 'id = row' + iteration?
TOP
