本文介绍了一种使用JavaScript实现的隔行变色表格效果。通过为偶数行添加特定的类名来改变其背景颜色，以此达到视觉上的区分效果。此方法适用于网页中展示大量数据的场景。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JavaScript实现隔行变色的表格</title>
<style>
<!--
.datalist{
border:1px solid #007108; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#d9ffdc; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #007108; /* 行名称边框 */
background-color:#00a40c; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
background-color:#a5e5aa; /* 隔行变色 */
}
-->
</style>
<script language="javascript">
window.onload = function(){
var oTable = document.getElementById("oTable");
for(var i=0;i<oTable.rows.length;i++){
if(i%2==0) //偶数行时
oTable.rows[i].className = "altrow";
}
}
</script>
</head>
<body>
<table class="datalist" summary="list" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
</tr>
<tr>
<td>slepox</td>
<td>W19</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
</tr>
<tr>
<td>shenhuanyan</td>
<td>W25</td>
</tr>
</table>
</body>
</html>
扫一扫
412
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
