How to change the row id according after deleting dynamically

[vijiruba]

Hi,

In my page i have to add rows dynamically and remove rows dynamically. I have one checkbox and three text boxes for each row which is added dynamically.

Adding and deleting rows works fine. I have problem after deleting. This is due to unchange of id value for checkbox and textboxes.

I assigned the id value in array and incremented while adding and decremented while removing. But the the id and values of the textboxes is not exact. How to fix this?

Regards,

Viji.

[rlemon]

var myTbl = document.getElementById('tableid');
var rows = myTbl.getElementsByTagName('TR');
for(i=0;i<rows.length;i++)
{
row[i].childNodes[(int) index of child node].id = your new id;
row[i].childNodes[(int) index of child node].id = your new id;
row[i].childNodes[(int) index of child node].id = your new id;
}

you just have to know where the elements are placed relative to their parent.

[vijiruba]

Thanks for ur reply. I think this will help to tackle my issue.

But i cant get ur code exactly. U mean to assign a new id for each row's checkbox and textboxes for every time while adding a new row?

What u mean by "childNodes" and "index of child node"? Is tis refersthe checkbox and textboxes what i have?

Thanks,
Viji.

[Kor]

After deletiing, you must circle again through all the rows and in each row to change the ids of your form's control according to the new rows' collection length as limit.

That was rlemon said

[vijiruba]

Here is my code:

If i add two rows dynamically and delete the first row, after deleting the checkbox and textboxes id should be changed accordingly.

<script language = "Javascript" type="text/javascript">
function AddRows()
{
  var tableId = document.getElementById('filtertable');
  var count = document.getElementById('rowCnt').value;
  var noOfRows = tableId.rows.length;
  var ptrRef = noOfRows;
		
  var tableRow = tableId.insertRow(noOfRows);	
  count++;			
 
  // Checkbox
  var chkBoxCell = tableRow.insertCell(0);
  var chkBoxColElem = document.createElement('input');
  chkBoxColElem.type = 'checkbox';
  chkBoxColElem.name = 'chkbox[]';
  chkBoxColElem.id = 'chkbox' + ptrRef;
  chkBoxCell.appendChild(chkBoxColElem);
			
  //Emp Name text box		
  var secondCell = tableRow.insertCell(2);
  var secondColElem = document.createElement('input');
   secondColElem.type = 'text';
   secondColElem.name = 'empName[]';
   secondColElem.id = 'empName' + ptrRef;	
   secondCell.appendChild(secondColElem);
			
   //Emp designation text box
   var thirdCell = tableRow.insertCell(3);
   var thirdColElem = document.createElement('input');
   thirdColElem.type = 'text';
   thirdColElem.name = 'empDesgn[]';
   thirdColElem.id = 'empDesgn' + ptrRef;	
   thirdCell.appendChild(thirdColElem);	
}
function RemoveRows()
{
  var tableId = document.getElementById('filtertable');
  var count = document.getElementById('rowCnt').value;
  var noOfRows = tableId.rows.length;
  if(count > 1)
  {
  for(i=1;i<count;i++)
  {
    itemCheck="chkbox"+i; 
    if(document.getElementById(itemCheck)!=undefined) 
    {						                             
    if(document.getElementById(itemCheck).checked==true) { 
      tableId.deleteRow(i);
      count--;
   }
 }
 }
}  else   {
    tableId.deleteRow(noOfRows - 1);
    count--;
}
document.getElementById('rowCnt').value = count;	
}
</script>

<form name="dynamicRows" method="post" action="<?php echo $PHP_SELF; ?>"  Autocomplete="off">
<table id="dynamicTable">
<tr>
 <td><input type="checkbox" name="chkbox[]" id="chkbox1"></td>	
 <td><input type="textbox" name="empName[]" id="empName1"></td>
<td><input type="textbox" name="empDesgn[]" id="empDesgn1"></td>
</tr>
<tr>
 <td><input type="button" value="Addrow()"></td>
 <td><input type="button" value="RemoveRow()"></td>
</tr>
</table>
</form>

After deleting deleting first row my second row's checkbox id should be changed to "chkbox1" and thired row's checkbox id should be changed to "chkbox2".

Regards,

Viji.

[Kor]

eeerrr. why did you give your form's elements' some ids, as long as you have "array names" for them (probably to send their values as an array to a php code)? What is the use of your ids?

[vijiruba]

I have used id for validation in javascript for adding rows. ( eg ) while adding a row, some values are selected and and tat values are assigned to the textboxes.

The next time while im adding a new row, i have done validation for not to add a row with already added values. For this i have used id's.

[MikeFoster]

cross-forum-ref