...

View Full Version : How to change the row id according after deleting dynamically



vijiruba
09-08-2006, 02:57 PM
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
09-08-2006, 05:43 PM
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
09-09-2006, 06:17 AM
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
09-09-2006, 07:34 AM
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
09-09-2006, 09:59 AM
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
09-09-2006, 05:41 PM
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
09-11-2006, 05:15 AM
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
09-11-2006, 06:26 PM
cross-forum-ref (http://www.sitepoint.com/forums/showthread.php?t=420148)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum