getElementById with same ids
Moderator: General Moderators
- kendall
- Forum Regular
- Posts: 852
- Joined: Tue Jul 30, 2002 10:21 am
- Location: Trinidad, West Indies
- Contact:
getElementById with same ids
Hey guys,
not a javascript guru but can i was trying to create a toggle function to toggle the display style property of <tr>. Thing is i have several <tr> with the same id (this is intentional). So i am only getting the first element with the corresponsgin id to show. can i access and change the display style of ALL the <tr> that have the same id at a given time?
Kendall
P.S. i have noticed that I.E. has a document.all which can perform this. Is this still an I.E. specific syntax? is there any equvilent to this for cross-browser compatability?
not a javascript guru but can i was trying to create a toggle function to toggle the display style property of <tr>. Thing is i have several <tr> with the same id (this is intentional). So i am only getting the first element with the corresponsgin id to show. can i access and change the display style of ALL the <tr> that have the same id at a given time?
Kendall
P.S. i have noticed that I.E. has a document.all which can perform this. Is this still an I.E. specific syntax? is there any equvilent to this for cross-browser compatability?
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
- kendall
- Forum Regular
- Posts: 852
- Joined: Tue Jul 30, 2002 10:21 am
- Location: Trinidad, West Indies
- Contact:
getElementById with same ids
OK OK OK OK OK! i know i know! why must we all conform to the norm!!? i will use an alternative. 
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
- kendall
- Forum Regular
- Posts: 852
- Joined: Tue Jul 30, 2002 10:21 am
- Location: Trinidad, West Indies
- Contact:
getElementById with same ids
Well, sigh. it was to fit into a design that my client had.
The code above represents a table i made in which some table rows are "sub menus".
Now... i could have just nested a "list" within a table row and toggle the table row its self but it wouldn't have conformed to design. i had know choice
Code: Select all
function ToggleSubMenu(menuid){
var submenu = document.all(menuid);// get menu row(s)
// check if the menu is show or hide
for(i=0;i<submenu.length;i++){
var menu = submenuїi];
if(menu.style.display == 'none'){
menu.style.display = 'inline';
}else{
menu.style.display = 'none';
}
}
}Code: Select all
<table width="e;93%"e; border="e;1"e; cellpadding="e;3"e; cellspacing="e;0"e; bordercolor="e;#999999"e; >
<tr onclick="e;ToggleSubMenu('submenu1')"e;>
<td width="e;12%"e; align="e;center"e; valign="e;middle"e; bgcolor="e;#CCCCCC"e;><img src="e;images/wht_triangle.gif"e; width="e;10"e; height="e;12"e;></td>
<td width="e;88%"e; class="e;style10"e;><a href="e;#"e;>Sunless Tanning</a></td>
</tr>
<tr id="e;submenu1"e; class="e;submenu"e;>
<td align="e;center"e; valign="e;middle"e;><img src="e;images/blue_triangle.gif"e; width="e;10"e; height="e;12"e;></td>
<td align="e;left"e; valign="e;middle"e; class="e;style10"e;>Air Brush Tan </td>
</tr>
<tr id="e;submenu1"e; class="e;submenu"e;>
<td align="e;center"e; valign="e;middle"e;><img src="e;images/blue_triangle.gif"e; width="e;10"e; height="e;12"e;></td>
<td align="e;left"e; valign="e;middle"e; class="e;style10"e;>Applicators</td>
</tr>
<tr id="e;submenu1"e; class="e;submenu"e;>
<td align="e;center"e; valign="e;middle"e;><img src="e;images/blue_triangle.gif"e; width="e;10"e; height="e;12"e;></td>
<td align="e;left"e; valign="e;middle"e; class="e;style10"e;>Exfoliants</td>
</tr>
<tr id="e;submenu1"e; class="e;submenu"e;>
<td align="e;center"e; valign="e;middle"e;><img src="e;images/blue_triangle.gif"e; width="e;10"e; height="e;12"e;></td>
<td align="e;left"e; valign="e;middle"e; class="e;style10"e;>Instant Sunless Tanning </td>
</tr>
<tr id="e;submenu1"e; class="e;submenu"e;>
<td align="e;center"e; valign="e;middle"e;><img src="e;images/blue_triangle.gif"e; width="e;10"e; height="e;12"e;></td>
<td align="e;left"e; valign="e;middle"e; class="e;style10"e;>Liquid Metallic Bronzers </td>
</tr>
<tr>
<td align="e;center"e; valign="e;middle"e; bgcolor="e;#CCCCCC"e;> </td>
<td class="e;style10"e;> </td>
</tr>
<tr>
<td align="e;center"e; valign="e;middle"e; bgcolor="e;#CCCCCC"e;> </td>
<td class="e;style10"e;> </td>
</tr>
<tr>
<td align="e;center"e; valign="e;middle"e; bgcolor="e;#CCCCCC"e;> </td>
<td class="e;style10"e;> </td>
</tr>
<tr>
<td align="e;center"e; valign="e;middle"e; bgcolor="e;#CCCCCC"e;> </td>
<td class="e;style10"e;> </td>
</tr>
<tr>
<td align="e;center"e; valign="e;middle"e; bgcolor="e;#CCCCCC"e;> </td>
<td class="e;style10"e;> </td>
</tr>
<tr>
<td align="e;center"e; valign="e;middle"e; bgcolor="e;#CCCCCC"e;> </td>
<td class="e;style10"e;> </td>
</tr>
<tr>
<td align="e;center"e; valign="e;middle"e; bgcolor="e;#CCCCCC"e;> </td>
<td class="e;style10"e;> </td>
</tr>
</table>Now... i could have just nested a "list" within a table row and toggle the table row its self but it wouldn't have conformed to design. i had know choice
use an incrementing numeric format you should for the ids.
to display or hide multiple at one time, use a for loop you could:
ex:
to display or hide multiple at one time, use a for loop you could:
ex:
Code: Select all
<script>
function hideIt(){
for(var i=1;i<4;i++){
document.getElementById('myid'+i).style.display = 'none';
}
}
</script>
<table>
<tr id="e;myid1"e;>
<td>Stuff</td>
</tr>
<tr id="e;myid2"e;>
<td>Stuff</td>
</tr>
<tr id="e;myid3"e;>
<td>Stuff</td>
</tr>
</table>- kendall
- Forum Regular
- Posts: 852
- Joined: Tue Jul 30, 2002 10:21 am
- Location: Trinidad, West Indies
- Contact:
getElementById with same ids
well that is a thought. however there would be more than 1 menu with sub menus and the sub menus will change in numbers from time to time. i'll stick with the same id theory. sub rules were perhaps meant to be broken.
LOL@ speak like Yoda day!
LOL@ speak like Yoda day!
It's not incredibly well documented, but there is a JS function called getElementByType().
Obviously, you could call it like:
I pulled the second line off the top of my head, so I'm not sure it'll work.
Obviously, you could call it like:
Code: Select all
document.getElementByType('tr').style.display=none;
//or if you don't want to affect all <tr>, maybe this
var table_to_affect = document.getElementById('myTable');
table_to_affect.getElementByType('tr').style.display=none;Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: getElementById with same ids
Actually, they arent. In fact, in some web browsers, duplicate ID's will trigger javascript errors, display errors, or quirks mode.kendall wrote:well that is a thought. however there would be more than 1 menu with sub menus and the sub menus will change in numbers from time to time. i'll stick with the same id theory. sub rules were perhaps meant to be broken.
Its *wrong*, *wrong*, wrong. ID's exist to be unique, so that you can pick *one* to target. What you want is better served by using a class, since that is their nature - mutliple elements that belong to one style/type. Then you can get elements in a class, target styling by class, or even getelement by type.
In any case, the standard exists for a reason, and not just because someone felt like it. Going against the grain ensures that current and future browsers will hate your code.
Why <span style='color:blue' title='I'm naughty, are you naughty?'>smurf</span> off the already picky browsers?
- kendall
- Forum Regular
- Posts: 852
- Joined: Tue Jul 30, 2002 10:21 am
- Location: Trinidad, West Indies
- Contact:
getElementById with same ids
OK then well does it work in I.E. for crying out loud!!! not that i am a activist or anything. Anyway i am always a webmaster that tries to stick to the rules. But gosh man! I don't see the effectiveness of using the getElementByType or the class to make life easier. You're saying i need to create a class for each batch of submenus? songs like a bit unnecessary. However, i will take your advice.
Thanks for the comments
Kendall
Thanks for the comments
Kendall