Display table row

[kopite]

Currently I display/undisplay INDIVIDUAL rows in a table by this code which is not ideal:

e.g. (to display)
myForm.elements[index].parentNode.parentNode.style.display=''

If I have a table id="myTbl" how can i apply to INDIVIDUAL rows in that table rather than my current code?

Cheers!

[khalidali63]

var tbl = document.getElementById("myTbl");

gives you reference to the table element,
Once you have that you can access all or some elements specifically in this table.the line below will give you a NodeList object of all the rows in this table

var rows = tbl.getElementsByTagName("tr");
you can loop through each one and do what you want...

and same will be for td's

actaully take a look at this link..it might help you..

http://68.145.35.86/skills/javascripts/DOMTableManipulation.html

[kopite]

tried this but to no avail:

document.getElementId(mTbl).getElementsByTagName("tr").parentNode.parentNode.style.display='';

and also...

document.getElementId(mTbl).getElementsByTagName("tr").style.display='';

Unfortunately, the url given was for adding and removing rows as opposed to displaying.

[Jona]

document.getElementId(mTbl).getElementsByTagName("tr").parentNode.parentNode.style.display='';

Should be:

document.getElementById(mTbl).getElementsByTagName("tr").parentNode.parentNode.style.display='';

Also, mTbl should be in quotes if that is the ID of the table. If you have a variable (a string) containing the ID of the table, then you can use mTbl.

[khalidali63]

Originally posted by kopite
tried this but to no avail:

document.getElementId(mTbl).getElementsByTagName("tr").parentNode.parentNode.style.display='';

. ...
If you read my post above,you'd notice that I said

Khalid
the line below will give you a NodeList object of all the rows in this table.
var rows = tbl.getElementsByTagName("tr");

to access an element from an array you have to point to array index to be retrieved..therefore correct way is

var rows = tbl.getElementsByTagName("tr");
rows[x].parentNode or value

[kopite]

I've tried this as my code but it is not doing it: :confused:

function exampleCode()
{
var rows = document.getElementById("myTbl").getElementsByTagName("tr");

for (var i=0;i<rows.length-1;i++)
{
obj = rows[i].parentNode;
obj.style.display='';
}

[khalidali63]

Originally posted by kopite

obj = rows[i].parentNode;
obj.style.display='';


The above ,I think, is not what you want,you wanted to display/hide a row.
in the above you are trying to do so for immidiate parent of "this" row.
it should be like this.

rows[i].style.visibility="visible or hidden"

[kopite]

It was display that I wanted, but I get your point and this works on a row by row basis:

rows[i].style.display='';

thanks