J
johkar
I would like to ensure this script is optimized (runs correctly or does
not execute) for the major browsers. Will checking getElementById and
getElementsByTagName accomplish this?
In addition, I would like adapt it to ignore table headers or rows with
existing classes hardcoded. I haven't been able to get the syntax
down. Any help appreciated. If there is an existing script that will
do all this, that is fine too. I haven't found it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function stripeTable(id){
if(document.getElementById && document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 1){
rows.className = "defaultclass";
}else{
rows.className = "rowstripe";
}
}
}
}
</script>
<style type="text/css">
..defaultclass { background-color:#fff;}
..rowstripe { background-color:#e7e7e7;}
</style>
</head>
<body onload="stripeTable('table1')">
<table width="50%" border="0" cellspacing="2" cellpadding="2"
id="table1">
<tr>
<th>My Table</th>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
not execute) for the major browsers. Will checking getElementById and
getElementsByTagName accomplish this?
In addition, I would like adapt it to ignore table headers or rows with
existing classes hardcoded. I haven't been able to get the syntax
down. Any help appreciated. If there is an existing script that will
do all this, that is fine too. I haven't found it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function stripeTable(id){
if(document.getElementById && document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 1){
rows.className = "defaultclass";
}else{
rows.className = "rowstripe";
}
}
}
}
</script>
<style type="text/css">
..defaultclass { background-color:#fff;}
..rowstripe { background-color:#e7e7e7;}
</style>
</head>
<body onload="stripeTable('table1')">
<table width="50%" border="0" cellspacing="2" cellpadding="2"
id="table1">
<tr>
<th>My Table</th>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>