getElementsByClassName ?

[nologo]

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;
};

function change(id){
     ID = document.getElementsByClassName(id);
    
     if(ID.style.display == "")
          ID.style.display = "none";
     else
          ID.style.display = "";
      } 

i am trying to show/hide based on the class...but the above code is giving me error:

ID.style has no properties

this is how html displays...

<tr id="2" style="display: none;">a</tr>
<tr id="2" style="display: none;">b</tr>

.....onclick="change(2)"

[chris_fuel]

Well, the problem is you're using ID's and not classes. Also, ID's must be unique, so those 2 tr's can't have the same ID of 2. In fact, I don't think you can do a numeric only id, you'd need a prefix for it. Looking at your setup, they're might be a more effective way to accomplish this without traversing the entire HTML structure. Are you just trying to hide information in a table?

[nologo]

Well, the problem is you're using ID's and not classes. Also, ID's must be unique, so those 2 tr's can't have the same ID of 2. In fact, I don't think you can do a numeric only id, you'd need a prefix for it. Looking at your setup, they're might be a more effective way to accomplish this without traversing the entire HTML structure. Are you just trying to hide information in a table?

oops...i pasted the cold html...here is the correct one...

<tr class="2" style="display: none;">a</tr>
<tr class="2" style="display: none;">b</tr>

.....onclick="change(2)"





yes i am trying to hide info in table...

[chris_fuel]

oops...i pasted the cold html...here is the correct one...

<tr class="2" style="display: none;">a</tr>
<tr class="2" style="display: none;">b</tr>

.....onclick="change(2)"

yes i am trying to hide info in table...

What's the full table look like out of curiosity (feel free to screen anything out if you don't want to show live data)?

[SoulScratch]

Google up an already existing function perhaps? There's one by Robert Nyman and J. Snook

[nologo]

What's the full table look like out of curiosity (feel free to screen anything out if you don't want to show live data)?

<table width="100%" cellpadding="5" cellspacing="0" border="1">
    <tr>
        <td align="center"><h1>id</h1></td>
        <td align="center"><h1>name</h1></td>
        <td align="center"><h1>add</h1></td>
        <td align="center"><h1>add2</h1></td>
    </tr>
    
    <tr>    
        <td align='center'><a href="#" onclick="change(1)">+</a>1</td>
        <td align='center'>text</td>
        <td align='center'>1</td>
        <td align='center'>1</td>
    </tr>
    <tr style="display:none" class="1">
        <td align='center'  colspan='6'>text</td>
    </tr>

                
                
    <tr>    
                <td align='center'><a href="#" onclick="change(2)">+</a>2</td>
                <td align='center'>ms</td>
                <td align='center'>1</td>
                <td align='center'>2</td>
    </tr>
                
                <tr style="display:none" class="2">

                            <td align='center'  colspan='6'>a</td>
                        </tr>
                
                <tr style="display:none" class="2">
                            <td align='center'  colspan='6'>b</td>
                        </tr>
                
                <tr style="display:none" class="2">
                            <td align='center'  colspan='6'>c</td>

                </tr>
</table> 

there....

[Tybe-O]

A bit of 'out of the box thinking':
You might achieve the same by adding/removing a classname to a specific container and then handle the display:block/none in css.

<style type="text/css">
table.hide2 tr.2 {display:none}
table.hide3 tr.3 {display:none}
</style>

<table class="hide2 hide3">
<tr class="2"><td>content</td></tr>
<tr class="3"><td>content</td></tr>
<tr class="2"><td>content</td></tr>
<tr class="4"><td>content</td></tr>
</table>

[Pepejeria]

Class names should not start with a number.

Also, note that several browsers today have native support for getElementsByClassName, so you should check if it exists before you override it.

[nologo]

function getElementsByClass( searchClass, domNode, tagNames) {
    if (domNode == null) domNode = document;
    if (tagNames == null) tagNames = '*';
    var el = new Array();
    var tags = domNode.getElementsByTagName(tagNames);
    var tcl = " "+searchClass+" ";
    for(i=0,j=0; i<tags.length; i++) {
        var test = " " + tags[i].className + " ";
        if (test.indexOf(tcl) != -1)
            el[j++] = tags[i];
    }
    return el;
}

function showtab(tabname) 
{
    var tabs = getElementsByClass('tab');
    for(i=0; i<tabs.length; i++){
     if(tabs[i].style.display == ""){
          tabs[i].style.display = "none";
        }
     else{
        tabs[i].style.display="";
      } 
    }
} 

<a href="#" onclick="showtab('tab2');">tab2</a>
<a href="#" onclick="showtab('tab3');">tab3</a>

<tr class="tab2" style="display: none;">
<tr class="tab2" style="display: none;">
<tr class="tab2" style="display: none;">
<tr class="tab3" style="display: none;">
<tr class="tab3" style="display: none;"> 

i need to pass the 'tab' name based on the <tr class="tab2"> in this line;
var tabs = getElementsByClass('tab');

e.g. changing to 'tab2' shows all the tab2 tr...but the tr is dynamic data so i dont know how many it will go upto...how do i make the js function to work with the dynamic data?

how do i do that?

[Pepejeria]

First off, you can keep your getElementsByTagName function, but as long as you do a check first

if (!document.getElementsByClassName) {
    // your implementation goes here
}

I am not sure I get your showtab function. You pass a string to it, but you don't do anything with the argument?

[nologo]

First off, you can keep your getElementsByTagName function, but as long as you do a check first

if (!document.getElementsByClassName) {
    // your implementation goes here
}

I am not sure I get your showtab function. You pass a string to it, but you don't do anything with the argument?

function showtab(tabname) 
{
    var tabs = getElementsByClass('tab'); //<<<<<<<<<<<<<<<<
    for(i=0; i<tabs.length; i++){
     if(tabs[i].style.display == ""){
          tabs[i].style.display = "none";
        }
     else{
        tabs[i].style.display="";
      } 
    }
} 

the showtab function shows/hides table row ...<tr class="tab1"> <tr class="tab2"> but the getElementByClass('tab') << 'tab' needs to be dynamic tab1 tab2...

[Pepejeria]

Hm, no, look again. You pass a string to the function showtab, but you do not do anything with this string.

[nologo]

Hm, no, look again. You pass a string to the function showtab, but you do not do anything with this string.

function showtab(tabname) 
{

    var tabs = getElementsByClass('tab');
    for(i=0; i<tabs.length; i++)
    tabs[i].style.display = 'none';
    document.getElementById(tabname).style.display='block';

} 

yeh but i dont need that, its no use i think....above is the orginal function ^ ...

[Pepejeria]

Ok, it is getting a bit confusing now, maybe I am slow here, but could you please show the latest showtab function and the actual function call with or without what you will need for it to work?

[nologo]

Ok, it is getting a bit confusing now, maybe I am slow here, but could you please show the latest showtab function and the actual function call with or without what you will need for it to work?

<script type="text/javascript">
function getElementsByClass( searchClass, domNode, tagNames) {
    if (domNode == null) domNode = document;
    if (tagNames == null) tagNames = '*';
    var el = new Array();
    var tags = domNode.getElementsByTagName(tagNames);
    var tcl = " "+searchClass+" ";
    for(i=0,j=0; i<tags.length; i++) {
        var test = " " + tags[i].className + " ";
        if (test.indexOf(tcl) != -1)
            el[j++] = tags[i];
    }
    return el;
}

function showtab(tabname) 
{
    var tabs = getElementsByClass('tab');
    for(i=0; i<tabs.length; i++)
        ID = document.getElementById(tabname);
     if(ID.style.display == ""){
                   ID.style.display = "none";
          }
         else{

                  ID.style.display = "";
              } 

}
</script> 

 <tr>    
    <td align='center'><a href="#"  onclick="showtab('tab4');">tab4</a>2</td>
 </tr>
    <tr class="tab bgray"  id="tab4"  style="display: none;">
        <td align='center'  colspan='6'>a</td>
    </tr>
    
    <tr class="tab bgray"  id="tab4"  style="display: none;">
        <td align='center'  colspan='6'>b</td>
    </tr>
    
    <tr class="tab bgray"  id="tab4"  style="display: none;">
        <td align='center'  colspan='6'>c</td>
    </tr> 

onclick it only displays 1st row 'a', i need to show/hide all 3 rows at same time.

thanks

[paul_wilkins]

That's not going to work because you'rew not allowed to have identifiers with the same name. They're supposed to be unique identifiers.

If you move the tab4 into the class attribute itself, you can then target that from the showtab() function

<tr>    
	<td align='center'><a href="#"  onclick="showtab('tab4');">tab4</a>2</td>
</tr>
<tr class="tab tab4 bgray"  style="display: none;">
	<td align='center'  colspan='6'>a</td>
</tr>
<tr class="tab tab4 bgray"  style="display: none;">
	<td align='center'  colspan='6'>b</td>
</tr>
<tr class="tab tab4 bgray"  style="display: none;">
	<td align='center'  colspan='6'>c</td>
</tr>

function showtab(tabname) {
    var tabs = getElementsByClass(tabname);
    for(i=0; i<tabs.length; i++) {
        if(tabs[i].style.display == ""){
            tabs[i].style.display = "none";
        } else {
            tabs[i].style.display = "";
        }
    }
}