SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow getElementsByClassName ?

    PHP Code:
    document.getElementsByClassName = function(cl) {
    var 
    retnode = [];
    var 
    myclass = new RegExp('\\b'+cl+'\\b');
    var 
    elem this.getElementsByTagName('*');
    for (var 
    0elem.lengthi++) {
    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)"

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  3. #3
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris_fuel View Post
    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...

  4. #4
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nologo View Post
    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)?

  5. #5
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Google up an already existing function perhaps? There's one by Robert Nyman and J. Snook

  6. #6
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris_fuel View Post
    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)?
    PHP Code:
    <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....

  7. #7
    SitePoint Member Tybe-O's Avatar
    Join Date
    Mar 2008
    Location
    NL, Rotterdam
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    HTML Code:
    <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>

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    function getElementsByClasssearchClassdomNodetagNames) {
        if (
    domNode == nulldomNode document;
        if (
    tagNames == nulltagNames '*';
        var 
    el = new Array();
        var 
    tags domNode.getElementsByTagName(tagNames);
        var 
    tcl " "+searchClass+" ";
        for(
    i=0,j=0i<tags.lengthi++) {
            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=0i<tabs.lengthi++){
         if(
    tabs[i].style.display == ""){
              
    tabs[i].style.display "none";
            }
         else{
            
    tabs[i].style.display="";
          } 
        }

    PHP Code:
    <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?

  10. #10
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off, you can keep your getElementsByTagName function, but as long as you do a check first
    Code:
    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?

  11. #11
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    First off, you can keep your getElementsByTagName function, but as long as you do a check first
    Code:
    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?
    PHP Code:
    function showtab(tabname
    {
        var 
    tabs getElementsByClass('tab'); //<<<<<<<<<<<<<<<<
        
    for(i=0i<tabs.lengthi++){
         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...

  12. #12
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm, no, look again. You pass a string to the function showtab, but you do not do anything with this string.

  13. #13
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    Hm, no, look again. You pass a string to the function showtab, but you do not do anything with this string.
    PHP Code:
    function showtab(tabname
    {

        var 
    tabs getElementsByClass('tab');
        for(
    i=0i<tabs.lengthi++)
        
    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 ^ ...

  14. #14
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  15. #15
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Pepejeria View Post
    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?
    PHP Code:
    <script type="text/javascript">
    function 
    getElementsByClasssearchClassdomNodetagNames) {
        if (
    domNode == nulldomNode document;
        if (
    tagNames == nulltagNames '*';
        var 
    el = new Array();
        var 
    tags domNode.getElementsByTagName(tagNames);
        var 
    tcl " "+searchClass+" ";
        for(
    i=0,j=0i<tags.lengthi++) {
            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=0i<tabs.lengthi++)
            
    ID document.getElementById(tabname);
         if(
    ID.style.display == ""){
                       
    ID.style.display "none";
              }
             else{

                      
    ID.style.display "";
                  } 

    }
    </script> 
    PHP Code:
     <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

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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

    Code html4strict:
    <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>

    Code javascript:
    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 = "";
            }
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •