Hi - I have a function which appends row(s) to the bottom of a table: -
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: -
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!
8  2756 
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 .. -
row_reference.parentNode.removeChild(row_reference);
-
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. -
<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!
@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 ... -
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 ... -
tab_ref.deleteRow(saved_rowIndex);
-
One more thing you can upgrade your "delRow" function. -
function delRow(thisRow)
-
{
-
thisRow.parentNode.removeChild(thisRow);
-
}
-
Kind regrds
Debasis.
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! -
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++;
-
}
-
Now it's Working now or not?
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... -
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!
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. -
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.
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!
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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 variables in another class.
Something like:
$obj = $factory->getObject("1234");
|
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:
Jim Smith
One who flew over the clock tower
The hunting game
|
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 row it stops..
At least that's what I thought I did, but VC71 says "warning C4717:
'LOOP<0,1>::DO' : recursive on all control paths, function will cause
runtime stack overflow".
What's wrong?
Here's the code:
template<int M, int N>
|
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 and MS Knowledge Base and found nothing helpful.
This didn't seem to be acknowledged as a synchroization error.
Investigations revealed data errors that resulted in a cascade of
related errors. Resolving the data errors apparently cured whatever...
|
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
{
}
}
| | |
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
when I tried nesting "With" clauses in MS Access 2000 it was a no-no.
Some sample code - in which it looks like they're creating/populating a
..XLS spreadsheet. "Option Explicit" is not specified in the module......
|
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 be a better way.
Suggestions anyone? By the way, I'm not opposed to coding, it just
seems like this should be easily doable on the aspx side of things.
Summary:
I'm stuffing the 3 three key fields from each row in the master
gridview into...
|
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 abstract class
that has the virtual function getId().
I then have a function that prints a special string when a bob meets
another bob (all combinations of bobs has to meet and since the are
schizophrenic they can also meet themselves):
|
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</>
</employee>
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
