Numbering Table Rows 2

[cdw0308]

I am having trouble with my row numbers on the table to re arrange them selves to the proper order when a row is deleted from.

For example

1
2
3
4

When i delete row 3 the order looks like this
1
2
4

When i add a row it then looks like this
1
2
4
4

I would like it to have renumbered itself to account for the deletion
1
2
3
4

Here is my code.
Javascript

<script language="javascript"> 
function deleteIt(i)
{
document.getElementById('table1').deleteRow(i)
var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteIt(lastRow - 1);
}
function addRow() 
{ 
var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0]; 
var lastRow = table1.rows.length;
var iteration = lastRow + 1;
var row = document.createElement("TR"); 

var cell0 = document.createElement("TD");
var inp0 =  document.createTextNode(iteration);
cell0.appendChild(inp0); 
var cell1 = document.createElement("TD"); 
var inp1 =  document.createElement("INPUT"); 
inp1.setAttribute("type","text"); 
inp1.setAttribute("value",""); 
inp1.setAttribute("name",'txt1Row' + iteration);
inp1.setAttribute("id",'txt1Row' + iteration);
cell1.appendChild(inp1); 
var cell2 = document.createElement("TD"); 
var inp2 =  document.createElement("INPUT"); 
inp2.setAttribute("type","text"); 
inp2.setAttribute("size","3"); 
inp2.setAttribute("value",""); 
inp2.setAttribute("name",'txt2Row' + iteration);
inp2.setAttribute("id",'txt2Row' + iteration);
cell2.appendChild(inp2); 
var cell3 = document.createElement("TD"); 
var inp3 =  document.createElement("INPUT"); 
inp3.setAttribute("type","text");
inp3.setAttribute("size","3"); 
inp3.setAttribute("value",""); 
inp3.setAttribute("name",'txt3Row' + iteration);
inp3.setAttribute("id",'txt3Row' + iteration);
cell3.appendChild(inp3);
var cell4 = document.createElement("TD"); 
var inp4 =  document.createElement("INPUT"); 
inp4.setAttribute("type","image"); 
inp4.setAttribute("src","images/delete.gif");
inp4.setAttribute("value","Delete"); 
inp4.onclick = function (){deleteIt(this.parentNode.parentNode.rowIndex);}
cell4.appendChild(inp4);

row.appendChild(cell0);
row.appendChild(cell1); 
row.appendChild(cell2); 
row.appendChild(cell3); 
row.appendChild(cell4);
tbody.appendChild(row); 

//alert(row.innerHTML); 
} 
</script>

HTML Code

<table id="table1"> 
<tbody> 
<tr> 
<td>1</td>
<td><input type="text" value="" name="txt1Row1"></td> 
<td><input type="text" value="" size="3" name="txt2Row1"></td> 
<td><input type="text" value="" size="3" name="txt3Row1"></td> 
<td><input type="image" value="Delete" onclick="deleteIt(this.parentNode.parentNode.rowIndex)" src="images/delete.gif"></td>
</tr> 
</tbody> 
</table> 
<input type="button" value="Insert Row" onClick="addRow();">
<input type="submit" value="Submit">

 

[kaht]

this will work, I commented out the lines that were causing an error:

<script language="javascript">
function deleteIt(i) {
   [!]var theTable = document.getElementById('table1');[/!]
   theTable.deleteRow(i);
   [!]for (j = 0; j < theTable.rows.length; j++) {
      theTable.rows[j].cells[0].innerHTML = j + 1;
   }[/!]
   [gray][i]//these lines don't seem to be doing anything - tbl isn't even defined.
   //var lastRow = tbl.rows.length;
   //if (lastRow > 2) tbl.deleteIt(lastRow - 1);[/i][/gray]
}

function addRow() {
   var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];
   var lastRow = table1.rows.length;
   var iteration = lastRow + 1;
   var row = document.createElement("TR");

   var cell0 = document.createElement("TD");
   var inp0 =  document.createTextNode(iteration);
   cell0.appendChild(inp0);
   var cell1 = document.createElement("TD");
   var inp1 =  document.createElement("INPUT");
   inp1.setAttribute("type","text");
   inp1.setAttribute("value","");
   inp1.setAttribute("name",'txt1Row' + iteration);
   inp1.setAttribute("id",'txt1Row' + iteration);
   cell1.appendChild(inp1);
   var cell2 = document.createElement("TD");
   var inp2 =  document.createElement("INPUT");
   inp2.setAttribute("type","text");
   inp2.setAttribute("size","3");
   inp2.setAttribute("value","");
   inp2.setAttribute("name",'txt2Row' + iteration);
   inp2.setAttribute("id",'txt2Row' + iteration);
   cell2.appendChild(inp2);
   var cell3 = document.createElement("TD");
   var inp3 =  document.createElement("INPUT");
   inp3.setAttribute("type","text");
   inp3.setAttribute("size","3");
   inp3.setAttribute("value","");
   inp3.setAttribute("name",'txt3Row' + iteration);
   inp3.setAttribute("id",'txt3Row' + iteration);
   cell3.appendChild(inp3);
   var cell4 = document.createElement("TD");
   var inp4 =  document.createElement("INPUT");
   inp4.setAttribute("type","image");
   inp4.setAttribute("src","images/delete.gif");
   inp4.setAttribute("value","Delete");
   inp4.onclick = function (){deleteIt(this.parentNode.parentNode.rowIndex);}
   cell4.appendChild(inp4);

   row.appendChild(cell0);
   row.appendChild(cell1);
   row.appendChild(cell2);
   row.appendChild(cell3);
   row.appendChild(cell4);
   tbody.appendChild(row);

   //alert(row.innerHTML);
}
</script>

HTML Code
CODE
<table id="table1">
<tbody>
<tr>
<td>1</td>
<td><input type="text" value="" name="txt1Row1"></td>
<td><input type="text" value="" size="3" name="txt2Row1"></td>
<td><input type="text" value="" size="3" name="txt3Row1"></td>
<td><input type="image" value="Delete" onclick="deleteIt(this.parentNode.parentNode.rowIndex)" src="images/delete.gif"></td>
</tr>
</tbody>
</table>
<input type="button" value="Insert Row" onClick="addRow();">
<input type="submit" value="Submit">

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[cdw0308]

Thanks kaht.
That worked great.

 

[cdw0308]

I noticed that my naming on the text boxes is still not changing when a line is deleted and added.
the names of the text boxes should read.

txt1Row1 txt2Row1 txt3Row1
txt1Row2 txt2Row2 txt3Row2
txt1Row3 txt2Row3 txt3Row3 and so on..

right now when i delete the second row it does this.
txt1Row1 txt2Row1 txt3Row1
txt1Row3 txt2Row3 txt3Row3

and it should be..

txt1Row1 txt2Row1 txt3Row1
txt1Row2 txt2Row2 txt3Row2

Any ideas??

  [COLOR=red] var lastRow = table1.rows.length;
   var iteration = lastRow + 1; [/color]
   var row = document.createElement("TR");
   var cell1 = document.createElement("TD");
   var inp1 =  document.createElement("INPUT");
   inp1.setAttribute("type","text");
   inp1.setAttribute("value","");
   inp1.setAttribute("name",'txt1Row' [COLOR=red]+ iteration);[/color]
   inp1.setAttribute("id",'txt1Row' + iteration);
   cell1.appendChild(inp1);

 

[tsuji]

They sure are incapable of renaming themselves. Hence, every time a create/delete operatoion is triggered, it should be followed by s script segment for a full scan of the table and renaming every cell according to its updated position (i,j). (That's what I would do.)

 

[cdw0308]

Can you please show me an example of what you mean?
My code is above. I am not sure what to change.
Thanks

 

[tsuji]

Suppose tbl is the table's reference.
[tt]
var rows=tbl.rows
for (var i=0;i<rows.length;i++) {
for (var j=1;j<rows.cells.length;j++) { //j=0, no input element
rows.cells[j].getElementsByTagName("input")[0].setAttribute("name","txt"+j+"Row"+(i+1));
}
}
[/tt]
Something like that. I might have index zero-based/one-based off your intention because I have not scrutinized your naming convention detailed enough.

 

[cdw0308]

Thanks, tsuji
That helped alot.
I have it working now.

 

[cdw0308]

I would like to have a text box outside the table that is hidden like this.

<table id="table1"> 
<tbody> 
<tr> 
<td>1</td>
<td><input type="text" value="" name="txt1Row1"></td> 
<td><input type="text" value="" size="3" name="txt2Row1"></td> 
<td><input type="text" value="" size="3" name="txt3Row1"></td> 
<td><input type="image" value="Delete" onclick="deleteIt(this.parentNode.parentNode.rowIndex)" src="images/delete.gif"></td>
</tr> 
</tbody> 
</table> 
[COLOR=red]<input type="text" name="total_count">[/color]
<input type="button" value="Insert Row" onClick="addRow();">
<input type="submit" value="Submit">

Now I need to populate the overall row count of the table to that text box so that I can pass it on to my coldfusion queries on my action page.
Any ideas??
Thanks

 

[tsuji]

Write to the textbox is always the same:
[tt]document.formname.total_count.value=tbl.rows.length;[/tt]
where again I refer to the table refernce as tbl, with formname changed to your specific form name.

You add this line to any create/delete operation function. You have to add it to window.onload or set a correct default value to it (1, in your case?). Also, maybe you specify it as readonly, if not hidden, so that users cannot change it by chance.
[tt]<input type="text" name="total_count" readOnly="true" value="1" />[/tt]

 

[cdw0308]

Thanks again.
That worked great.