asked on

Javascript - add, delete row problem

The code is below. i want the delete button to appear on the last row only. As an alternative I dont mind the delete button appears on all rows as long as when a row is deleted the fields left in the form are renamed to 1, 2, 3, 4, 5 etc etc

Many thanks in advance

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
var rowNum = 1;
function addRow(){
tabBody = document.getElementById('name').firstChild;
deleterow = document.getElementById('whatever').firstChild;
newRow = tabBody.appendChild(tabBody.firstChild.cloneNode(true));
rowNum = rowNum + 1;
document.form1.count.value = rowNum;
document.form1.textfieldcount.value = rowNum;
for(i=0;i<newRow.cells.length;i++)
newRow.cells[i].innerHTML = newRow.cells[i].innerHTML.replace(/1([^\d])/g, rowNum+'$1');
}

function deleteRow(node) {
if (rowNum > 1) {
var td = node.parentNode;
while (td.tagName.toLowerCase() != "tr")
td = td.parentNode;
td.parentNode.removeChild(td);
rowNum = rowNum - 1;
document.form1.count.value = rowNum;
}
else {
alert ("You cannot delete the last remaining row");
}
}
</script>
</head>
<body>
<form name="form1" method="get" action="">
<table width="100%">
<tr>
<td width="35%"><input name="count" type="text" class="textbox" id="count" value="1"></td>
<td><img src="../images/field_add.gif" alt="Add Row" width="14" height="14" align="absmiddle" class="imagebutton" onClick="addRow()"/> <span class="psmall">add</span></td>
</tr>
</table>
<table width="100%" id="name">
<tr>
<td width="35%"><input name="textfield1" type="text" class="textbox" id="textfield1">
<input name="textfieldcount" type="text" class="textbox" id="textfieldcount" value="1" size="2"></td>
<td id="whatever"><img src="../images/field_delete.gif" alt="Delete //Row"width="14" height="14" align="absmiddle" class="imagebutton" //onClick="deleteRow(this)"/><span class="psmall"> delete</span></td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>

ASKER CERTIFIED SOLUTION

Zontar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kate99

ASKER

Thanks - seems to work really well