Problem in removing rows - javascript

  • Srikanth.S
  • Born
  • Born
  • Srikanth.S
  • Posts: 1
  • Loc: India

Post 3+ Months Ago

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: [ Select ]
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;
    }
}
  1. for(j=1; j<tableId.rows.length; j++)
  2. {
  3.     
  4.     if(j==1)
  5.     {
  6.         document.formname.tmpFirstTextBox.value = document.getElementById('firstTextBox' + j).value;
  7.         document.formname.tmpSecondTextBox.value = document.getElementById('secondTextBox' + j).value;
  8.     }
  9.     else
  10.     {
  11.         document.formname.tmpFirstTextBox.value += ";" + document.getElementById('firstTextBox' + j).value;
  12.         document.formname.tmpSecondTextBox.value += ";" + document.getElementById('secondTextBox' + j).value;
  13.     }
  14. }


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: [ Select ]
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);
  1. var noOfRows = tableId.rows.length;
  2. var tableRow = tableId.insertRow(noOfRows);
  3. var firstCell = tableRow.insertCell(0);
  4. var firstCellElem = document.createElement('input');
  5. firstCellElem.type = 'text';
  6. firstCellElem.name = 'firstTextBox[]';
  7. firstCellElem.id = 'firstTextBox' + noOfRows;
  8. firstCellElem.size = 10;
  9. firstCellElem.value = 'testValue1';
  10. firstCell.appendChild(firstCellElem);
  11. var secondCell = tableRow.insertCell(1);
  12. var secondCellElem = document.createElement('input');
  13. secondCellElem.type = 'text';
  14. secondCellElem.name = 'secondTextBox[]';
  15. secondCellElem.id = 'secondTextBox' + noOfRows;
  16. secondCellElem.size = 20;
  17. secondCellElem.value = 'testValue2';
  18. secondCell.appendChild(secondCellElem);
  19. var chkBoxCell = tableRow.insertCell(2);
  20. var chkBoxColElem = document.createElement('input');
  21. chkBoxColElem.type = 'button';
  22. chkBoxColElem.name = 'remSelectedRows[]';
  23. chkBoxColElem.id = 'remSelectedRows' + noOfRows;
  24. chkBoxColElem.value = ' - ';
  25. chkBoxColElem.onclick = 'RemoveSelectedRows(' + noOfRows + ')';
  26. chkBoxCell.appendChild(chkBoxColElem);


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.

Regards,
Srikanth S
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • nilesh_nildatak
  • Born
  • Born
  • nilesh_nildatak
  • Posts: 1

Post 3+ Months Ago

Hello,
I also tried to remove the selected row in the table row, for this will you please send me code of following function.
function RemoveSelectedRows(' + noOfRows + ')'....
as per reference from above last code from Shrikant S.

In hope of your kind reply..

Thanks

Nilesh K
  • gkumar
  • Beginner
  • Beginner
  • gkumar
  • Posts: 39

Post 3+ Months Ago

use this coding to help remove row
Quote:
<html>
<body>
<script language="JavaScript">
function function1() {
document.all.myT.deleteRow(2);
}
</script>
<table id="myT" width="25%" border="1">
<tr>
<td>Row 1</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Cell 4</td>
</tr>
</table>
<input type="button" value="Remove Row 3" onclick="function1();">
</body>
</html>

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: Bogey and 96 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.