need help with this alt table row script plz... [Archive]

View Full Version : need help with this alt table row script plz...

babelfish

04-19-2005, 10:58 AM

Hi all!

ok, i have this script:

var defbg = '#E6F4F4'

function altTableRows(bg, fg, usedefault) {

if(usedefault != 1) { // use to set a default - use [altTableRows('#cc0000','#0000ccc', 1) 1 for override]
bg = defbg
}

var tableElements = document.body.all.tags("table");
var table = tableElements[tableElements.length-1];
var headlength="";
rowlength="";
heads = table.getElementsByTagName("th") ;
headlength=heads.length;

for( i = 0; i <headlength; i++) {
heads[i].bgColor = '#D2D2D2';
rows = table.getElementsByTagName("tr") ;
}

for( i = 0; i < rows.length; i++) {
if(i % 2) {
celllength=rows[i].cells.length;
for (var c = 0; c < celllength; c++)
rows[i].cells[c].bgColor = '';
}
else
rows[i].bgColor= bg//'#E6F4F4';
}
}

that works great BUT only if there is 1 table on a page (that doesnt happen much really!)

what i really need is a way to control this by using an ID on the table. the tables i need to control are like this:

<table cellpadding='2' cellspacing='0' border='0' class='listtable'>

i was hoping to add id='listtable' and be able to do getelementsbyid but that doesnt seem to work and im unsure of what to try next. any help appreciated

Kor

04-21-2005, 11:07 AM

var tableElements = document.body.all.tags("table"); It is an IE only and anyway it is not enough

use this instead

var tabs = document.getElementsByTagName("table");
for(var i=0;i<tabs.length;i++){

and use tabs[i] instead of table the rest of your code

}

babelfish

04-21-2005, 11:20 AM

thanks KOR! :thumbsup:

you have helped me out 2 times in 15 mins, very impressive :)

Kor

04-21-2005, 12:24 PM

Just try to use DOM methods instead of IE only methods for a cross-browser code

babelfish

04-21-2005, 12:30 PM

yeah, that was my issue with it. i saw that script on another forum and hadnt really had time to test it under various situations.

i have just got a virtual IE5 machine (im on my new winxp workstation) so i can test backwards compatibility.

babelfish

04-21-2005, 01:06 PM

bugger....

i get an error... did you mean like this?

function altTableRows(bg, fg, usedefault) {

var headlength="";
var rowlength="";

if(usedefault != 1) { // use to set a default - use [altTableRows('#cc0000','#0000ccc', 1) 1 for override]
bg = defbg
}

var tabs = document.getElementsByTagName("table");
for(var i=0;i<tabs.length;i++){
heads = tabs[i].getElementsByTagName("th") ;
headlength=heads.length;

for( i = 0; i <headlength; i++) {
heads[i].bgColor = '#D2D2D2';
rows = tabs[i].getElementsByTagName("tr") ;
}

for( i = 0; i < rows.length; i++) {
if(i % 2) {
celllength=rows[i].cells.length;
for (var c = 0; c < celllength; c++)
rows[i].cells[c].bgColor = '';
}
else
rows[i].bgColor= bg
}
}
}

Kor

04-21-2005, 03:15 PM

which error? (it is not clear to me, for instance, which is the value of defbg variable). Can you post the whole code, please? (Or at least the significant part of it)

babelfish

04-21-2005, 03:25 PM

it says rows is undefined.. ?

the defbg is just a way to override the default values... dont worry about that

Kor

04-21-2005, 03:34 PM

well, hm... try to avoid javascript reserved or used words as variable, functions or parameter names. Try replacing rows with, let's say oRows

and, try to be consequent

celllength=rows[i].cells.length

If you decided to use DOM notation, that use getElementsByTagName('td') instead of cells.

Kor

04-21-2005, 03:35 PM

What is your final goal, after all?

babelfish

04-21-2005, 03:59 PM

basically just to alternate row colours on tables that i can name...

so maybe just tables with a certain ID or class etc...

if you can see a better way plz explain, i have never used 'getElementsByTagName' before so am unsure of what you can do with it.

i grabbed this script from a lotus notes forum and it obviously isnt THAT good.

anyone got a better one? maybe cross browser?

Kor

04-21-2005, 04:32 PM

basically just to alternate row colours on tables that i can name...

alternate at which event? onload?

Kor

04-21-2005, 04:53 PM

like this?:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
var bg = ['#CC0000','#E6F4F4']
onload= function(){
var oTabs = document.getElementsByTagName('table');
for(var i=0;i<oTabs.length;i++){
var oRows = oTabs[i].getElementsByTagName('tr');
for(var j=0;j<oRows.length;j++){
var q=j/2;
if(String(q).indexOf('.')>-1){//if the index is an even number
oRows[j].style.backgroundColor=bg[1];
}
else{
oRows[j].style.backgroundColor=bg[0];
}
}
}
}
</script>
</head>
<body>
table1<br>
<table width="400" border="0" cellpadding="2" cellspacing="2">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
table 2<br>
<table width="400" border="0" cellpadding="2" cellspacing="2">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

babelfish

04-21-2005, 05:34 PM

thats great - thanks! :thumbsup: :thumbsup: