使用函数完成表格奇偶行的颜色设定

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>

上一篇：报表打印

下一篇：关于图像验证码的实现