Removing "nested" rows in a table

127 100+

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

Expand|Select|Wrap|Line Numbers

 
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:

Expand|Select|Wrap|Line Numbers

 
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!

Apr 14 '09 #1

Subscribe Post Reply

2718

dmjpro

2,476

2GB

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

Expand|Select|Wrap|Line Numbers

row_reference.parentNode.removeChild(row_reference);

Apr 15 '09 #2

phub11

127

100+

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.

Expand|Select|Wrap|Line Numbers

 
<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!

Apr 15 '09 #3

dmjpro

2,476

2GB

@phub11
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 ...

Expand|Select|Wrap|Line Numbers

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

Expand|Select|Wrap|Line Numbers

tab_ref.deleteRow(saved_rowIndex);

One more thing you can upgrade your "delRow" function.

Expand|Select|Wrap|Line Numbers

 
function delRow(thisRow)

{

thisRow.parentNode.removeChild(thisRow);

}

Kind regrds
Debasis.

Apr 16 '09 #4

phub11

127

100+

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!

Expand|Select|Wrap|Line Numbers

 
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++;

}

Apr 16 '09 #5

dmjpro

2,476

2GB

Now it's Working now or not?

Apr 17 '09 #6

phub11

127

100+

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

Expand|Select|Wrap|Line Numbers

 
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!

Apr 17 '09 #7

dmjpro

2,476

2GB

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.

Expand|Select|Wrap|Line Numbers

 
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.

Apr 20 '09 #8

phub11

127

100+

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!

Apr 20 '09 #9

Similar topics

inner "nested" classes?

by: Average_Joe | last post by:

Hello PHP people, Was wondering if PHP5 had some sort of "nested class" functionality. I'm trying to figure out how to return an object (with a private constructor) that has access to...

PHP

solution to how I coded "nested repeat regions" or heirarchical displays

by: NotGiven | last post by:

the code below assumes 3 result sets: rsAuthors - authors table rsBooks - book table rsBooksSummary - summary of book table, Count(bookid) grouped by authorID It displays something like this: ...

PHP

2 variable "nested" loop with TMP

by: Robin Eidissen | last post by:

What I try to do is to iterate over two variables using template metaprogramming. I've specialized it such that when it reaches the end of a row ot starts on the next and when it reaches the last...

C / C++

Synchronize attempt failed: Error #3003: "Could not start transaction; too many transactions already nested."

by: P. Emigh | last post by:

A client that synchronizes over the internet encountered Error #3003: "Could not start transaction; too many transactions already nested" when attempting to synchronize. I checked user groups...

Microsoft Access / VBA

"Private" nested classes

by: Etienne Boucher | last post by:

Nested classes are usualy objects made to only live in their parent object instance. In other words... public class Outter { public class Inner { } }

C# / C Sharp

Nested "With" Clauses?

by: (PeteCresswell) | last post by:

I'm going over an application written by somebody else and have encountered what looks to me like nested "With"s. Is this something new with MS Access 2003 or am I losing it? Seems to me that...

Microsoft Access / VBA

"codeless" nested gridviews...there has to be a better way

by: Roy | last post by:

Hey all. Below is the nested syntax on how to make a "codeless" nested gridview embedded within another gridviews templatefield column. Only problem is that it loads slow. REAL SLOW. There has to...

ASP.NET

Avoid nested "if's"?

by: desktop | last post by:

I have 3 types of objects: bob1, bob2 and bob3. Each object is identified by a unique ID which gets returned by the function getId(). All bobs are descendants from class BaseBob which is an...

C / C++

trying to READ nested "tables"

by: G.Waleed Kavalec | last post by:

The nested option for WRITING XML is pretty clear. I have a problem trying to READ nested "tables".... <employer> <acct>1234</> </employees> <employee> <lastname>Smith</> <ssn>123456789</>...

.NET Framework

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA