How to change the row id according after deleting dynamically

@vijirubaauthorSep 09.2006 — #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.

[CODE]<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>[/CODE]

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".

How to change the row id according after deleting dynamically

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to change the row id according after deleting dynamically

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴