Table Row rowIndex

[Jona]

Hey, guys, I have a question (duh). I've been working with Mili on her add/delete rows in a table function. We've got it working perfectly except for one small problem. We can't figure out how to delete exclusively the rows with checked checkboxes. They are all named the same and all dynamically generated. The Mili's post is at: http://forums.webdeveloper.com/showthread.php?s=&threadid=9091

I could figure it out, if someone could give me some more information on rowIndex. I am trying to get a function that will return the rowIndex of a row with a checked box, but I can't quite figure it out.. Here's what I've got so far:

function getRowNum(){
var z = document.getElementById('myTable').getElementsByTagName("TR").cellIndex;
alert(z);
return z;
}

[khalidali63]

in the very beginning of the milli's post take a look at the link I posted,it removes, a cell, all the cells in the tr,
a tr or all the tr's in the table,it should be enough to get you going.(I think it was way too much for mill)
:D

[Jona]

Could you please post the link again? The link I gave was her second post on the problem (right? I don't see you posting anywhere in it). Thanks. :)

[Jona]

Never mind, Khalid. I found it. I'll let you know what I come up with (if and) when I get it working.

[khalidali63]

no problems...

Here you go.
http://68.145.35.86/skills/javascripts/DOMTableManipulation.html

It should be fairly simple,let me know if you have any questions.

[khalidali63]

lol....darn...I missed you with few clicks

[Jona]

LOL, that's okay. Would it be possible for you to document this code:

function removeElement(cmd,obj,parent){
if(cmd=="tr"){
var rows = obj.getElementsByTagName("tr");
var row = (rows[rows.length-1])
if(isIE){
tdCtr-=(row.getElementsByTagName("td").length);
row.removeNode(true);
}else{
tdCtr-=(row.getElementsByTagName("td").length);
obj.removeChild(rows[rows.length-1]);
}
}else if(cmd=="td"){
var tds = obj.getElementsByTagName("td");
var td = tds[tds.length-1];
if(isIE){
tdCtr--;
td.removeNode(true);
}else{
tdCtr--;
(td.parentNode).removeChild(td);
}
}
parent.appendChild(obj);
if(isIE){//IE cover up
parent.innerHTML = parent.innerHTML
}
}

I understand all of the imported params and stuff, but what I'd like a little more insight on, is the first part of the function...

[khalidali63]

Find out if its the row/rows that needs to be removed
if(cmd=="tr"){

get all the rows in the table(obj)
var rows = obj.getElementsByTagName("tr");

now get the last row to delete to keep a sequence
var row = (rows[rows.length-1])

once this is done then remove for IE is different as of today then NS6+
if(isIE){
tdCtr-=(row.getElementsByTagName("td").length);
row.removeNode(true);
}else{
tdCtr-=(row.getElementsByTagName("td").length);
obj.removeChild(rows[rows.length-1]);
}

As a matter of fact you will not be doing all this,since you will have determined a row to delete already.
Now what you will have to do is get the row reference from the checked checkbox.
There are several ways,
you can get the parent tr from the onclick event,
or just by using object.parentNode
or give your checkbox a name such as name="cb_1"
where 1 could represent first tr
that way you can get reference to that tr id="1"

var row = document.getElementById("retrieved integer value rom cb name)

and then just use this part of the code

if(isIE){
tdCtr-=(row.getElementsByTagName("td").length);
row.removeNode(true);
}else{
tdCtr-=(row.getElementsByTagName("td").length);
obj.removeChild(rows[rows.length-1]);
}

hope it helps

[Jona]

By the way, the code I am using uses the deleteRow() method of the table object. So I don't need to use removeNode(true), I just need to get the integer that points to the row with a checked box dynamically. But that's my real problem. If I knew how to do that, I would just be able to use deleteRow(theRowNumber). See where I'm coming from? If you need to see my latest code, just ask me. :)

[khalidali63]

Oh alright IE only stuff...

post a link to the complete page you have so far

[Jona]

Thanks, Khalid, that's what I thought the code did. But the checkboxes are named all the same.. I know that will have to change, right? But that means using a for() loop to make each dynamically generated checkbox's name cb_+i (where i is the for() loop), and search through that in the function.

Anyways, how would I go about doing it with the object.parentNode() method?

[Jona]

LOL, we need to stop cross-posting! :p

Here's the link: http://geocities.com/god_loves_07/add_del_tbl.html

[khalidali63]

:D I agree...

give me few mins.I'll uppload it on my webserver..

[Jona]

OK.

[khalidali63]

Here you go...
I took the liberty to delete the previous logic for the delrow function.

the new functionis only 7 lines...

and added 2 variables(1 array and a counter)

and another function setRow...
Let me know if you have any questions

http://68.145.35.86/temp//RemoveTableRows-Jona.html

[Jona]

Cool, that works. I had just come up with this...

function addRow(id){
if(dom){
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
for(var chk=0;chk<document.Test.elements.length;chk++)
td1.innerHTML = "<input type=checkbox align=center name='cb_"+chk+"' id='cb_"+chk+"' onClick='getRow(this)'>";
var td2 = document.createElement("TD")
td2.innerHTML = "<select size=1 name='"+name+"' id='"+name+"'><option selected>Select a Type<option value=1>Basis Price<option value=2>Float<option value=3>Integer</select>";
var td3 = document.createElement("TD")
td3.innerHTML = "<input type=text align=center size=25 name='"+name+"' id='"+name+"'>";
//td2.appendChild (document.createTextNode("column 2"))
var td4 = document.createElement("TD")
td4.innerHTML = "<input type=text align=center size=25 name='"+name+"' id='"+name+"'>";
//td3.appendChild (document.createTextNode("column 2"))
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
tbody.appendChild(row);} else { return; }
}

function getRow(p){
if(dom)
x = p.parentNode.parentNode.rowIndex;
z = document.getElementsByTagName("TR")[x];
}

function delRow(myTable){
alert(z)
tableLength = getTableLength(myTable);
if(ie&&dom){
if(tableLength>1) eval("document.all."+myTable+".deleteRow(z);");}
if(!ie&&dom){if(tableLength>1) document.getElementById(myTable).deleteRow(z);}
if(document.layers) return;
}

I was wondering, how would I send the variable "z" through all of the functions so that I can use z = getRow() in the delRow() function? If I could do that, my function will work (right?).

[mili]

Hey guys...thank you so much for working on my problem.I know Khalid is frustrated..I'm sorry..but I had to get this working.I spent a lot of days doing this and still couldnt get this to work..