Removing "nested" rows in a table

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • phub11
    New Member
    • Feb 2008
    • 127
    #1

    Removing "nested" rows in a table

    Hi - I have a function which appends row(s) to the bottom of a table:

    Code:
    function mouseUpHandler() {
var table = document.getElementById("mytable");
var rowCount = table.rows.length;  
var addRow = table.insertRow(rowCount);
addRow.id = cnt;
var addCell = addRow.insertCell(1);
addCell.id = cnt;
addCell.colSpan = 3;
var element = document.createElement("input");
element.type="button";
element.value="Add fixed component";
element.onclick=function(){
addComponent(this)
}
addCell.appendChild(element);
}
    The button within the(se) row(s) allows the user to repeatedly insert "nested" row(s) in between:

    Code:
    function addComponent(nSel)
{
var nrowIndex = nSel.parentNode.parentNode.rowIndex;
var addRow = document.getElementById('mytable').insertRow(nrowIndex+1);
addRow.id = nSel.parentNode.id;
var addCell = addRow.insertCell(0);
addCell.id = nSel.parentNode.id;
addCell.colSpan = 3;
addCell.innerHTML = 'Component:';
}
    My problem is I want a function that deletes the last added row executed by "mouseUpHandler " and all the "nested" cells related to that "parent" cell (but not any "nested cells of earlier "parent" cells). My problem is that the value required by deleteRow varies every time this delete command is executed.

    I have tried to circumvent this by naming all "nested" cells (and their corresponding rows) the same is their "parent" row. But I cannot figure out how to delete multiple rows (or cells) that have the same ID.

    Any suggestions?

    Thanks!
    Tags: None
    • dmjpro
      Top Contributor
      • Jan 2007
      • 2476
      #2
      in HTML same ID should not appear more than once. Actually what happens it takes the element which got the same ID lastly.
      "deleteRow" needs the row number(starts from 0) which you want to delete.
      Can't you get the row number?
      One thing you can do .... take the row reference then remove it ..
      Code:
      row_reference.parentNode.removeChild(row_reference);

        Comment

        • phub11
          New Member
          • Feb 2008
          • 127
          #3
          Thanks for the reply!

          Since inserting "nested" cells changes row numbering, I'm starting to think I need an array which keeps track of each group of cells ("parent" and "nested" offspring). Is this the best approach?

          I have added some code below which should demonstrate what I'm trying to do. Basically, I want the "Remove Last Group" button to delete the last "parent" cell, and all of it's corresponding "nested" cells.

          Code:
          <html>
<head>
<script type="text/javascript">

window.onload = function() {
insRow();
}

function insRow()
{
var myTab = document.getElementById('myTable');
var rowLength=myTab.rows.length; 
var addRow=myTab.insertRow(rowLength);
 
var addCell=addRow.insertCell(0);
var element= document.createElement('input');
element.type="text";
addCell.appendChild(element); 

var addCell=addRow.insertCell(1);
var element= document.createElement('input');
element.type="button";
element.value="Add Nested Row";
element.onclick = function(){
nestedRow(this)} 
addCell.appendChild(element);

var addCell=addRow.insertCell(2);
var element= document.createElement('input');
element.type="button";
element.value="Remove";
element.onclick = function(){
delRow(this)} 
addCell.appendChild(element); 
}

function nestedRow(thisRow)
{
var rowIndex = thisRow.parentNode.parentNode.rowIndex;
var addRow = document.getElementById('myTable').insertRow(rowIndex+1);
var addCell=addRow.insertCell(0);
addCell.innerHTML = 'Nested Row';

var addCell=addRow.insertCell(1);
var element= document.createElement('input');
element.type="button";
element.value="DEL. NESTED ROW";
element.onclick = function(){
delRow(this)} 
addCell.appendChild(element);
}

function delRow(thisRow)
{
var rowIndex = thisRow.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(rowIndex);
}

function removeLast()
{
alert("I'm stuck here!");
}
</script>
 
</head>
<body>
<br/>
<input type="button" value="Add New Row" onclick="insRow()">
<br/>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>Name</th>
<th></th>
</tr>
</table>
<input type="button" value="Remove Last Group" onclick="removeLast();" />
</body>
</html>
          Thanks in advance for any help!

            Comment

            • dmjpro
              Top Contributor
              • Jan 2007
              • 2476
              #4
              Originally posted by phub11

              Code:
              function delRow(thisRow)
{
var rowIndex = thisRow.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(rowIndex);
}

function removeLast()
{
alert("I'm stuck here!");
}
</script>
              What you want to do with the "removeLast "?
              Do you want to delete the last row you add or want to remove the last row?
              If you want to delete the last row then ...
              Code:
              tab_ref.deleteRow(tab_ref.rows.length-1);
              and if you want to delete the last added row then you track the last row index in a global variable when added then ...
              Code:
              tab_ref.deleteRow(saved_rowIndex);
              One more thing you can upgrade your "delRow" function.
              Code:
              function delRow(thisRow)
{
thisRow.parentNode.removeChild(thisRow);
}
              Kind regrds
              Debasis.

                Comment

                • phub11
                  New Member
                  • Feb 2008
                  • 127
                  #5
                  Thanks for the reply.

                  I managed to figure out what I wanted to do (sorry if I wasn't clear). I've included the salient part below. It's probably not the best way - but I'm still a Javascript newbie, so I guess I'm excused! I'll try to incorporate your suggestions too.

                  Oh, and the "deleteLast " takes all values in the last element of the "cellsArray ", makes that into a new array (containing all nested rows pertaining to the parent row), and deletes those rows.

                  Cheers!

                  Code:
                  rowCnt=0;
nrowCnt=0;
cellsArraylength = (cellsArray.length)
//need to set "rowPrefix" aginst parent cell ID (only set during insCell)
rowPrefix = cellsArray[parentRowID]
alert("cellsArray:"+cellsArray+" parentRowID:"+parentRowID+" rowIndex:"+rowIndex+" rowPrefix:"+rowPrefix);
cellsArray.splice(parentRowID,1,rowPrefix+'-'+(rowIndex+1));
alert(cellsArray);
for (rowCounter=0; rowCounter < (cellsArraylength); rowCounter++) {
tempString = String(cellsArray[rowCounter]);
//check if "tempString" contains more than 1 row in it's group (i.e., an "-")
multiRowcheck = tempString.match("-");
if (multiRowcheck=="null"){
tempArray = parseInt(tempString);
} else {
tempArray = tempString.split( '-' );
}
tempArraylength = (tempArray.length);
for (insCounter=0; insCounter < (tempArraylength); insCounter++) {
tempArray[insCounter]=nrowCnt;
nrowCnt++;
}
tempString = tempArray.join('-');
cellsArray[rowCnt] = tempString;
rowCnt++;
}

                    Comment

                    • dmjpro
                      Top Contributor
                      • Jan 2007
                      • 2476
                      #6
                      Now it's Working now or not?

                        Comment

                        • phub11
                          New Member
                          • Feb 2008
                          • 127
                          #7
                          Yes, but.....

                          Adding a nested row produces the correct insertion into an element of an array, such that, with 3 parent rows (Array[] = 0,1,2), insertion into row 2 (or Array[1]) produces Array[]=0,1-2,3. (The "-" keeps track of nested rows).

                          However, deleting the newly nested row is proving difficult. For the above example, I would like to change Array[1] from "1-2" back to "1", and Array[2] from "3" back to "2". Below is my code.

                          Any help gratefully appreciated...

                          Code:
                          function delnestRow(thisRow)
{
rowCnt=0;
nrowCnt=0;
var rowIndex = thisRow.parentNode.parentNode.rowIndex;
cellsArraylength = (cellsArray.length);
for (rowCounter=0; rowCounter < (cellsArraylength); rowCounter++) {
tempString = String(cellsArray[rowCounter]);
//check if "tempString" contains more than 1 row in it's group (i.e., an "-")
multiRowcheck = tempString.match("-");
if (multiRowcheck=="null"){
tempArray = parseInt(tempString);
} else {
tempArray = tempString.split( '-' );
}
tempArraylength = (tempArray.length);
for (insCounter=0; insCounter < (tempArraylength); insCounter++) {
tempArray[insCounter]=nrowCnt;
alert('tempArray[insCounter]: '+tempArray[insCounter]+' nrowCnt: '+nrowCnt+' rowIndex: '+rowIndex);
//If counter matches rowIndex, delete that element
////if (nrowCnt==rowIndex){
//////tempArray.splice(insCounter,1);
////} else {
////nrowCnt++;
////}
if (nrowCnt==rowIndex){
tempArray[insCounter]="";
nrowCnt--;
} else {
nrowCnt++;
}
}
tempString = tempArray.join('-');
cellsArray[rowCnt] = tempString;
rowCnt++;
}
document.getElementById( 'selectedCells2' ).innerHTML = cellsArray;
document.getElementById('myTable').deleteRow(rowIndex);
}
                          Cheers!

                            Comment

                            • dmjpro
                              Top Contributor
                              • Jan 2007
                              • 2476
                              #8
                              See ... First of all stop writing Cheers! It's so confusing :)
                              Anyway ... Do one thing keep the references of newly added nested row, no matter wherever it added.
                              Then delete all the nested rows from the Array and then clear the Array. The Array must be a global reference.

                              Code:
                              var nestedRows = [];

function addNestedRows(){
 var row1 = ..... 
 ....
 ....
 nestedRows[nestedRows.length] = row1;
 var row2 = ..... 
 ....
 ....
 nestedRows[nestedRows.length] = row2;
 ....
 ....
 //Up to Nth Row
}

function deleteAll(){
 for(var i=0;i<nestedRows.length;i++) nestedRows[i].parentNode.removeChild(nestedRows[i]);
 nestedRows.length = 0;
}
                              I think it would be better to delete the Nested Rows.

                                Comment

                                • phub11
                                  New Member
                                  • Feb 2008
                                  • 127
                                  #9
                                  Thanks!

                                  Over the weekend I figured out a nice way of deleting groups of rows (i.e., the parent row and all of its daughters). Basically, assign a sequentially increased row ID to each newly added parent row. Then, each time a new "nested" row is inserted, sequentially renumber both the array (parent) and arrayed array (parent and daughters) according to rowIndex (i.e., 0,1-2-3,4 becomes 0-1,2-3-4,5). When deleting a nested row, loop through the array (and arrayed array) and splice off all rows where the selected rowIndex doesn't match the loop counter (i.e., all bar one); the splice position can be calculated by "rowIndex-parentRowID". Next renumber the array and arrayed array so that it sequentially increases again (i.e., 0-1,2-3-4,5 first changes to 0,2-3-4,5 and is then renumbered to 0,1-2-3,4).

                                  Confused? Me too!

                                  Che.... I mean, thanks!

                                    Comment

                                    Previous template Next
                                    Working...