hide all the even rows in a table

**lord22** · 08-03-2008, 04:19 PM

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;

**lord22** · 08-03-2008, 07:18 PM

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>

**jscheuer1** · 08-03-2008, 09:11 PM

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>

**lord22** · 08-03-2008, 09:27 PM

Thank you very much!

**lord22** · 08-04-2008, 06:24 AM

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 oTable, a = 0; a < arguments.length; ++a) {
            oTable = document.getElementById(arguments[a]);
            var r = 0,
            row, rows = 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 r = document.getElementById('mytable').rows, i = r.length - 1; i > -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>

**jscheuer1** · 08-04-2008, 09:41 AM

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

**jscheuer1** · 08-04-2008, 10:07 AM

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>

**lord22** · 08-04-2008, 10:23 AM

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

Thread: hide all the even rows in a table

Thread Tools

Search Thread

hide all the even rows in a table

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

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

Bookmarks

Bookmarks

Posting Permissions