PDA

View Full Version : hide all the even rows in a table



lord22
08-03-2008, 03: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, 06:18 PM
Here is the code that I've made. I will appreciate if you will find my errors:


<!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, 08: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:


<!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, 08:27 PM
Thank you very much!

lord22
08-04-2008, 05:24 AM
I tried to make a link that will show and hide one hiding row.
Can anyone see what the problem is?



<!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, 08: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:


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


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


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


onclick="toggleRow('mytable2');return false;"

jscheuer1
08-04-2008, 09: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):


<!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, 09:23 AM
Thank you so much !!
I learn a lot from you :)