使用函數完成表格奇偶行的顏色設定
2024-07-21 02:24:02
供稿：網友
對于表格,為了讓用戶瀏覽時不會看錯行,一般使用奇偶行機制,可以采用后臺經過判斷奇偶來給table著色.
這里提供一種簡便的方法,即是頁面加載完畢后用js腳本判斷,對表格進行著色.如下:
<!-- 歡迎轉載,請保留作者及其出處,謝謝 -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>table color</title>
<style>
table{border-top:1px solid black;border-left:1px solid black;cursor:default;}
td{border-bottom:1px solid black;border-right:1px solid black;height:22px;}
th{border-bottom:2px solid black;border-right:1px solid black;background-color:#999999;}
.trodd{background-color:#ffffff;}
.treven{background-color:#cccccc;}
</style>
<script language="javascript">
/*********************** settablecolor.js ***********************************/
/**
* added by lxcjie 2004.6.25
* 自動掃描表格，描繪奇偶行的顏色
* 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樣式
*/
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 = "";
}
}
/*********************** settablecolor.js 結束 ***********************************/
</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="0" cellspacing="0" cellpadding="0" 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="0" cellspacing="0" cellpadding="0" 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>
</html>
