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;
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.
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>
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> <scripttype="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> <tableid="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
lord22 (08-03-2008)
Thank you very much!
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>
Last edited by lord22; 08-04-2008 at 06:29 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:
withinCode:var toggleRow = function()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:"
and this link: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>
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:<a href="#" onclick="return toggleRow('mytable2');">show/hide row 2</a>
Code:onclick="toggleRow('mytable2');return false;"
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
lord22 (08-04-2008)
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
Thank you so much !!
I learn a lot from you![]()
Bookmarks