Hiding Table Rows

[Steve Dyke]

I know this probably is crazy but here goes anyway.

I am populating a table using JSTL. I am giving the same ID to several rows. I have put a onclick on the row also so I can verify the row ID value. Now when I fire the following it only hides the first row but I want to hide all the rows with that ID:

 
document.getElementById("Dimenional").style.display = "none";
 

[Bear Bibeault]

Originally posted by Steve Dyke:
I am giving the same ID to several rows.[/CODE]

Then your markup is invalid. It will not work in any way that you can count on. Try using class names instead of ids to identify the elements to be operated upon.

[Eric Pascarello]

Just to clarify what Bear is saying: IDs are singular, just like your bank account number, drivers license, government id number, etc. You can not have more than one element on the page with the same id.

Eric

[Steve Dyke]

Originally posted by Bear Bibeault:

Try using class names instead of ids to identify the elements to be operated upon.

Can you explain how this is done?

[Eric Pascarello]

You build a function or use a built in method that looks up the classnames of the elements on the page.

You might want to start with a google search for getElementsByClassName

[I think you used JQuery?]

Eric

[Steve Dyke]

Okay. But how will this help me identify a set of table rows then hide those table rows only? Don't all table rows belong to the same class?

[Eric Pascarello]

You give them another class, just like you were giving them an id previously. [You can have more than one class on an element.]

Eric

[Steve Dyke]

I have found and added this JS to my code but I get an error that getElementsByClassName().style is null or not an object.

 
function hiderows(){
document.getElementsByClassName("SDE").style.display = "none";
}


document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}; 
 

[Eric Pascarello]

You need to learn how to debug.

Look at the code you are using.

It is returning the contents of the variable retnode;

retnode is declared as var retnode = [];

[] is shorthand notation for new Array();

So that means you have an array, so you need to loop through the array and set the styles of each element.

Eric

[Steve Dyke]

Sorry to keep being a pest but I get error Object Required with this code.

 
function hiderows(){
var t1 = document.getElementsByClassName("SDE");
for(x=0;x<t1.length;x++){
 

document.getElementById(t1[x]).style.display = "none";
}

}


document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}; 
 

[Muhammad Saifuddin]

if still doesn't know which line of code is giving you the error then try fire bug.. to debug your code..

hope it helps.

[Steve Dyke]

I do know the line generating the error

document.getElementById(t1[x]).style.display = "none";

[Eric Pascarello]

That code returns the object of the element. There is no need to use getElementById with it.

t1[0].style.display = "none";

Eric

[Steve Dyke]

Thanks.
[ October 01, 2008: Message edited by: Steve Dyke ]

[Muhammad Saifuddin]

Hi Eric,

There is no need to use getElementById with it.

is this because that this is the underline method of document Object, which is used to access all elements in a page instead of access from the array?

Thanks.