Results 1 to 8 of 8

Thread: hide all the even rows in a table

  1. #1
    Join Date
    Jul 2008
    Posts
    81
    Thanks
    38
    Thanked 2 Times in 2 Posts

    Default hide all the even rows in a table

    Hi

    Is there a way to hide all the even rows (tr) of a table (I prefer not using special id's but if it is necessary it's OK)?

    thanks

    * I mean to change their style to display:none;
    Last edited by lord22; 08-03-2008 at 04:45 PM.

  2. #2
    Join Date
    Jul 2008
    Posts
    81
    Thanks
    38
    Thanked 2 Times in 2 Posts

    Default

    Here is the code that I've made. I will appreciate if you will find my errors:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Untitled Document</title>
    <
    script language="javascript">
    onload =function(){
        var 
    counter 0;
        var 
    tr      tbody.firstChild;

        while(
    tr){
            
    tr.style.display none[counter++ % 2];
            
    tr tr.nextSibling;
        }
    }
    </script>
    </head>

    <body>
    <fieldset>
    <legend>Demo</legend>
    <table cellspacing="0" width="100%">
    <tbody id="colorMe">
    <tr>
    <td>Row 1</td>
    </tr>
    <tr>
    <td>Row 2</td>
    </tr>
    <tr>
    <td>Row 3</td>
    </tr>
    <tr>
    <td>Row 4</td>
    </tr>
    <tr>
    <td>Row 5</td>
    </tr>
    <tr>
    <td>Row 6</td>
    </tr>
    </tbody>
    </table>
    </fieldset>
    </body>
    </html> 

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    The main immediate problem is that tbody in your function is not defined, there could be others. However, it is preferable in my opinion to use the table's rows collection rather than DOM level 2 methods on the tbody which (especially as regards tables) may not work cross browser. Also, one should never use XHTML unless one is serving an application (if you do though, IE will not render it). For web pages (text/html), use HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    window.onload = function(){
    for (var r = document.getElementById('colorMe').rows, i = r.length - 1; i > -1; --i)
    r[i].style.display = i%2? 'none' : '';
    };
    </script>
    </head>
    
    <body>
    <fieldset>
    <legend>Demo</legend>
    <table id="colorMe" cellspacing="0" width="100%">
    <tbody>
    <tr>
    <td>Row 1</td>
    </tr>
    <tr>
    <td>Row 2</td>
    </tr>
    <tr>
    <td>Row 3</td>
    </tr>
    <tr>
    <td>Row 4</td>
    </tr>
    <tr>
    <td>Row 5</td>
    </tr>
    <tr>
    <td>Row 6</td>
    </tr>
    </tbody>
    </table>
    </fieldset>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    lord22 (08-03-2008)

  5. #4
    Join Date
    Jul 2008
    Posts
    81
    Thanks
    38
    Thanked 2 Times in 2 Posts

    Default

    Thank you very much!

  6. #5
    Join Date
    Jul 2008
    Posts
    81
    Thanks
    38
    Thanked 2 Times in 2 Posts

    Default

    I tried to make a link that will show and hide one hiding row.
    Can anyone see what the problem is?

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <
    html>
    <
    head>
    <
    title>untitled</title>

    <
    script type="text/javascript">
        
    /* call onload with table id(s) */
        
    function TR_set_toggle() {
            
    /* toggleRow method */
            
    var toggleRow = function() {
                
    this.style.display = ((this.style.display == '') ? 'none''');
                return 
    false;
            }

            for (var 
    oTable0arguments.length; ++a) {
                
    oTable document.getElementById(arguments[a]);
                var 
    0,
                
    rowrows oTable.rows;
                while (
    row rows.item(r++)) row.toggle toggleRow;
            }

            
    /* convenience function */
            
    self.toggleRow = function(row_id) {
                
    document.getElementById(row_id).toggle();
            }
        }

    window.onload = function(){
    for (var 
    document.getElementById('mytable').rowsr.length 1> -1; --i)
    r[i].style.display i%2'none' '';
    };

    </script>
    </head>
    <body>
    <table id="mytable">
    <tr id="mytable1">
    <td>row 1 row 1 row 1 row 1</td>
    <td>row 1 row 1 row 1 row 1</td>
    </tr>
    <tr id="mytable2">
    <td>row 2 row 2 row 2 row 2</td>
    <td>row 2 row 2 row 2 row 2</td>
    </tr>
    <tr id="mytable3">
    <td>row 3 row 3 row 3 row 3</td>
    <td>row 3 row 3 row 3 row 3</td>
    </tr>
    <tr id="mytable4">
    <td>row 4 row 4 row 4 row 4</td>
    <td>row 4 row 4 row 4 row 4</td>
    </tr>
    </table>
    <a href="#" onClick="toggleRow('mytable2')">show row 2</a>
    </body>
    </html> 
    Last edited by lord22; 08-04-2008 at 06:29 AM.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    It's difficult to tell what you intend by all that code, it's so overcomplicated. However, your intention (as far as the result goes) is clear because of your post, the name of the function called by the onclick event, and the text for its link.

    I know you are trying to learn, so I will try to inform on the existing code some. If you do:

    Code:
    var toggleRow = function()
    within function TR_set_toggle(), it's not available in the global scope where the onclick event occurs. I think you were trying to set up an object or function object and use it to assign a function to elements (the rows). But this isn't how to go about it, and it's not at all required here.

    Now normally I wouldn't go into any of that, other than saying, "Its overcomplicated, use this code:"

    Code:
    <script type="text/javascript">
    
    function toggleRow (id) {
    	var r = document.getElementById(id).style;
    	    r.display = r.display == 'none'? '' : 'none';
    	return false;
            };
    
    window.onload = function(){
    for (var r = document.getElementById('mytable').rows, i = r.length - 1; i > -1; --i)
    r[i].style.display = i%2? 'none' : '';
    };
    
    </script>
    and this link:

    Code:
    <a href="#" onclick="return toggleRow('mytable2');">show/hide row 2</a>
    I'll add that it's pointless to return false for the function called onclick (as far as the link firing or not firing its href goes) unless you pass the return value to the link as shown above. You could also (in this case) have no return at all for the function and simply return false for the onclick event itself:

    Code:
    onclick="toggleRow('mytable2');return false;"
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    lord22 (08-04-2008)

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    After looking at this further, I think you may have been trying to do something like this (though I still think it's overkill for this purpose, it is instructive):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    
    function toggleRow(id){
    return document.getElementById(id).trf();
    }
    
    window.onload = function(){
    var tr = function(){
    this.style.display = this.style.display == 'none'? '' : 'none';
    return false;
    };
    var at = function(el){
    el.trf = function(){return tr.apply(el);};
    };
    for (var r = document.getElementById('mytable').rows, i = r.length - 1; i > -1; --i){
    r[i].style.display = i%2? 'none' : '';
    at(r[i]);
    };
    };
    
    </script>
    </head>
    <body>
    <table id="mytable">
    <tr id="mytable1">
    <td>row 1 row 1 row 1 row 1</td>
    <td>row 1 row 1 row 1 row 1</td>
    </tr>
    <tr id="mytable2">
    <td>row 2 row 2 row 2 row 2</td>
    <td>row 2 row 2 row 2 row 2</td>
    </tr>
    <tr id="mytable3">
    <td>row 3 row 3 row 3 row 3</td>
    <td>row 3 row 3 row 3 row 3</td>
    </tr>
    <tr id="mytable4">
    <td>row 4 row 4 row 4 row 4</td>
    <td>row 4 row 4 row 4 row 4</td>
    </tr>
    </table>
    <a href="#" onclick="return toggleRow('mytable2');">show/hide row 2</a>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #8
    Join Date
    Jul 2008
    Posts
    81
    Thanks
    38
    Thanked 2 Times in 2 Posts

    Default

    Thank you so much !!
    I learn a lot from you

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
  •