<!--第一步:把下列代码加入到head区域内-->
<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.knowsky.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内容为下面内容-->
<body onLoad="init()">
<!--第三步:把下列代码加到BODY区域内-->
<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>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE><p>
<input type="button" value=" 交 换 " onClick="change()" style="border:1px solid black; ">
</body>
<!--代码说明:说明：
1、在<body>中加入onLoad="init()" ，变为<body onLoad="init()">
2、函数function init()
{
setRowColor(document.all.tableRow,'trOdd','trEven');
setColColor(document.all.tableCol,'trOdd','trEven');
}
tableRow、tableCol 为设定颜色的表格ID值
setRowColor 为设定隔行颜色函数
setColColor 为设定隔列颜色函数
-->
