Problem in removing rows – javascript

Hi All,

I’m creating table rows dynamically using javascript, with the TDs’ in each row has text boxes with default values loaded in it. On final form submission I’m loading certain hidden values with the dynamically generated row element values.

[CODE]
for(j=1; j<tableId.rows.length; j++)
{

if(j==1)
{
document.formname.tmpFirstTextBox.value = document.getElementById(‘firstTextBox’ + j).value;
document.formname.tmpSecondTextBox.value = document.getElementById(‘secondTextBox’ + j).value;
}
else
{
document.formname.tmpFirstTextBox.value += “;” + document.getElementById(‘firstTextBox’ + j).value;
document.formname.tmpSecondTextBox.value += “;” + document.getElementById(‘secondTextBox’ + j).value;
}
}[/CODE]

Also I’ve a remove button which removes the last row of the table and every thing works fine for the above case. I tried to remove the selected row by creating extra element in the table row as follows.

[CODE]var noOfRows = tableId.rows.length;
var tableRow = tableId.insertRow(noOfRows);

var firstCell = tableRow.insertCell(0);
var firstCellElem = document.createElement(‘input’);
firstCellElem.type = ‘text’;
firstCellElem.name = ‘firstTextBox[]’;
firstCellElem.id = ‘firstTextBox’ + noOfRows;
firstCellElem.size = 10;
firstCellElem.value = ‘testValue1’;
firstCell.appendChild(firstCellElem);

var secondCell = tableRow.insertCell(1);
var secondCellElem = document.createElement(‘input’);
secondCellElem.type = ‘text’;
secondCellElem.name = ‘secondTextBox[]’;
secondCellElem.id = ‘secondTextBox’ + noOfRows;
secondCellElem.size = 20;
secondCellElem.value = ‘testValue2’;
secondCell.appendChild(secondCellElem);

var chkBoxCell = tableRow.insertCell(2);
var chkBoxColElem = document.createElement(‘input’);
chkBoxColElem.type = ‘button’;
chkBoxColElem.name = ‘remSelectedRows[]’;
chkBoxColElem.id = ‘remSelectedRows’ + noOfRows;
chkBoxColElem.value = ‘ – ‘;
chkBoxColElem.onclick = ‘RemoveSelectedRows(‘ + noOfRows + ‘)’;
chkBoxCell.appendChild(chkBoxColElem);[/CODE]

The removal function for the particular row also works fine and I’m able to remove the desired row.
Say in a series of rows a,b,c and if b is removed the whole id index collapses and I’m getting error on final submission since I’m doing every thing with the element ids’. Is there any javascript tricks to handle this case, i.e after removal of any row, the available row element ids’ in the table should be rearranged in a correct sequence so that on final submission i can iterate through the table TD element ids’ without any index errors.

Also in #JavaScript _↴