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>
kate99Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZontarCommented:
You mean something like this?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function renameRows(tBodyEl)
{  
  var rows = tBodyEl.getElementsByTagName("tr");    
  var row, cell, input, j;
 
  for(var i = 0; i < rows.length; i++)
  {
    j = i + 1;
    row = rows[i];
    cell = row.getElementsByTagName("td")[0];
    input = cell.getElementsByTagName("input")[0];
       
    input.name = "count" + j;    
    input.value = j;
  }
  document.getElementById("textfieldcount").value = rows.length;
}

function addRow()
{
  var table = document.getElementsByTagName("table")[0];
  var tBody = table.getElementsByTagName("tbody")[0];
  var rows = tBody.getElementsByTagName("tr");    
 
  var newRow = tBody.appendChild(rows[0].cloneNode(true));
 
  renameRows(tBody);
}

function removeRow()
{
  var table = document.getElementsByTagName("table")[0];
  var tBody = table.getElementsByTagName("tbody")[0];
  var rows = tBody.getElementsByTagName("tr");  
  var row = rows[0];
 
  if(rows.length > 1)
  {
    tBody.removeChild(row);
    renameRows(tBody);
  }
  else
    alert ("You cannot delete the last remaining row");
}
</script>
</head>
<body>
<form name="form1" method="get" action="">
  <table>
    <tr>
      <td><input name="textfield1" type="text" class="textbox" value="1"></td>
    </tr>
  </table>
  <table>
    <tr>
      <td>
      <input name="textfieldcount" type="text" class="textbox" id="textfieldcount" value="1" size="2"></td>
      <td class="psmall">
        <p><img src="../images/field_add.gif" alt="Add Row"
        width="14" height="14" align="absmiddle" class="imagebutton" onClick="addRow();">add</p>
        <p><img src="../images/field_delete.gif" alt="Delete Row"
             width="14" height="14" align="absmiddle" class="imagebutton" onClick="removeRow();">delete</p>
      delete</td>
    </tr>
  </table>
  <input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kate99Author Commented:
Thanks - seems to work really well
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.