表格奇偶行颜色相异

来源：互联网发布：生日礼物淘宝编辑：程序博客网时间：2024/05/14 03:34

<head>
<STYLE>
th{background-color:#999999;}
.trOdd{background-color:#FFFFFF;}
.trEven{background-color:#CCCCCC;}
</STYLE>
<SCRIPT language="javascript">
/**
* 自动扫描表格，描绘奇偶行的颜色
* oTable：目标表格 oddClass：奇数行的css样式 evenClass：偶数行的css样式
*/
function setRowColor(oTable,oddClass,evenClass)
{
resetTableColor(oTable);
for(var i=1; i<oTable.rows.length; i++)
{
if(i % 2 == 0)
oTable.rows[i].className = evenClass;
else
oTable.rows[i].className = oddClass;
}
}
/**
* added by LxcJie 2004.6.28
* 自动扫描表格，描绘奇偶列的颜色
* oTable：目标表格 oddClass：奇数列的css样式 evenClass：偶数列的css样式
*/
//more javascript from http://www.mb5u.com
function setColColor(oTable,oddClass,evenClass)
{
resetTableColor(oTable);
for(var i=1; i<oTable.rows.length; i++)
{
for(var j=0; j<oTable.rows[i].cells.length; j++)
{
if(j % 2 == 0)
oTable.rows[i].cells[j].className = evenClass;
else
oTable.rows[i].cells[j].className = oddClass;
}
}
}
//清空所有tr和td的样式
function resetTableColor(oTable)
{
for(var i=1; i<oTable.rows.length; i++)
{
oTable.rows[i].className = "";
for(var j=0; j<oTable.rows[i].cells.length; j++)
oTable.rows[i].cells[j].className = "";
}
}
</SCRIPT>
<SCRIPT language="javascript">
window.changeTag = true;
function init()
{
setRowColor(document.all.tableRow,'trOdd','trEven');
setColColor(document.all.tableCol,'trOdd','trEven');
}
function change()
{
if(changeTag)
{
setRowColor(document.all.tableCol,'trOdd','trEven');
setColColor(document.all.tableRow,'trOdd','trEven');
changeTag = false;
}
else
{
setRowColor(document.all.tableRow,'trOdd','trEven');
setColColor(document.all.tableCol,'trOdd','trEven');
changeTag = true;
}
}
</SCRIPT>
</head>

<body onLoad="init()">

<TABLE width="70%" border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" id="tableRow">
<TR>
<TH scope="col">col1</TH>
<TH scope="col">col2</TH>
<TH scope="col">col3</TH>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
<P>
<TABLE width="70%" border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" id="tableCol">
<TR>
<TH width="25%" scope="col">col1</TH>
<TH width="25%" scope="col">col2</TH>
<TH width="25%" scope="col">col3</TH>
<TH width="25%" scope="col">col4</TH>
</body></html>