Solved

Javascript  - add, delete row problem

Posted on 2003-10-29
2
3,769 Views
Last Modified: 2012-08-13
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>
0
Comment
Question by:kate99
2 Comments
 
LVL 11

Accepted Solution

by:
Zontar earned 200 total points
ID: 9642625
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>
0
 

Author Comment

by:kate99
ID: 9642669
Thanks - seems to work really well
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Jquery form 9 38
PHP: Filling Out/Creating a PDF 29 94
Jquery 7 28
Aspx calendar pop up control 3 25
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question