anything instead of getElementsByTagName(...)[14] ???

[heeeep72]

Dear JS-ers!

On my page the row "row" repeats itself many times, and I want to refer to something on a certain row, and I want to make this stg. visible / invisible. I can not use the document.getElementById(), because then JS does not know, which row I am speaking about.. But in this way it is therribly ugly, and if something else changes on my page, then this hard coded 14 is not 14 any more (but maybe 15 or 13 or whatever...)

Could anybody show me an other way to do this (not using hard coded values)?

function toggleSomething(row)
{
	if(	row.getElementsByTagName('div')[14].style.display == '')
	{
		row.getElementsByTagName('div')[14].style.display = "none";
		row.getElementsByTagName('div')[14].style.visibility = "hidden";
	} 
	else
	{
		row.getElementsByTagName('div')[14].style.display = '';
		row.getElementsByTagName('div')[14].style.visibility = "visible";
	}
}

from my jsp:

...
<table id="thetable" style="visibility:hidden;" >
	<tr id="therow">
		...
		...here is something I want to toggle with the JS...
		...
	</tr>
</table>
...

Any help would be appreciated, including references to other posts with the same topic...

heeeep

 

[cLFlaVA]

do all of your rows have the same ID? that's not valid markup. why can't you give each a unique id, then use document.getElementById()?

also, how would you be calling the functionality? what type of event?



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[theniteowl]

cLFlaVA is right, you should be giving them all their own unique ID's to start with.
If for some reason that is not possible to do you can use DOM methods to work your way through all of the elements on the page to find the one you want to work with but you would still need a way to identify which one is correct.

You could identify for example an element inside the table row like an input field and then use the DOM to back up to the table row and alter it's properties. This way is a lot more complex than using getElementById though.

But before you do anything else, I highly suggest not using words like div and row for names. You will eventually run into problems with reserved words conflicting with your field ids/names and causing problems.
If you want to be able to identify tables, rows, cells, text fields, etc, easily by name then use the word as part of the name or a shortened version like name="txtField1" or id="tblMyTable". That way you can easily tell what a variable is referencing without running the risk of conflicts with reserved words.


At my age I still learn something new every day, but I forget two others.

 

[heeeep72]

Hi cLFlaVA and theniteowl,

thank you for your quick answers! I think it was really a mistake, because this way the id for the row is simply useless. ...Even if so, my JS function finds the actual row itself, the problem is with the elements inside the row. I am thinking about the following solution: for each row I have a javabean behind, which bean has an id.

I think that I should somehow concatenate this id to the end of the id-s of the elements I want to toggle, and this way they all had unique id-s. This way I could use the document.getElementById() and find the specific element, that I want to toggle (with an event of klicking a button)

Same way I could make unique id-s for each rows, and then my function call would be also nicer. At the moment it is something like this:

onclick="toggleSomething(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);

Let me know what you think!
If any of you could send some example for the above mentioned id-concatenation, (just for the right syntax), that would be of great help to me!
Thank you!


heeeep