表格隔行变色,是很多项目中经常用到的,今日闲着没事就对表格隔行变色做了些研究,这里共找了4种方法,所有方法实现的效果如下:
一、隔行给TR的class赋值,来实现隔行变色
首先在样式里建立表格隔行变色的样式累类,如下代码:
.tbDatalist tr.altrow
{
background-color: #a5e5aa;
}
然后在table的隔行tr里,增加此样式<tr class="altrow">,这种方式比较原始和麻烦
完整代码如下:
<html>
<head>
<title>隔行给TR的class赋值,来实现隔行变色</title>
<style type="text/css">
.tbDatalist
{
border: 1px solid #007108;
width: 500;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
}
.tbDatalist th
{
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
}
.tbDatalist td
{
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
}
.tbDatalist tr.altrow
{
background-color: #a5e5aa;
}
</style>
</head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名</th>
<th scope="col">班级</th>
<th scope="col">出生日期</th>
<th scope="col">星座</th>
<th scope="col">电话</th>
</tr>
<tr>
<td>slepox</td>
<td> W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr class="altrow">
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr class="altrow">
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
</table>
</body>
</html>
二、利用JS脚本,循环判断表格调用样式,来实现隔行变色
基于第一种方式比较麻烦,我们可以加入脚本,来循环表格行,如果是偶数行的话,就对此行增加class样式。
oTable.rows[i].className = "altrow"; //altrow为预定义的样式
或者直接写代码增加样式
oTable.rows[i].style.backgroundColor = "#a5e5aa";
完整代码如下:
<html>
<head>
<title>利用JS脚本,循环判断表格调用样式,来实现隔行变色</title>
<style type="text/css">
.tbDatalist
{
border: 1px solid #007108;
width: 60%;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
}
.tbDatalist th
{
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
}
.tbDatalist td
{
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
}
.tbDatalist tr.altrow
{
background-color: #a5e5aa;
}
</style>
<script type="text/javascript">
//利用JS脚本,循环判断表格调用样式来实现隔行变色
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"; //或oTable.rows[i].style.backgroundColor = "#a5e5aa";
}
}
</script>
</head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名</th>
<th scope="col">班级</th>
<th scope="col">出生日期</th>
<th scope="col">星座</th>
<th scope="col">电话</th>
</tr>
<tr>
<td>slepox</td>
<td> W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
</table>
</body>
</html>
三、在样式里写CSS表达式(expression),来实现隔行变色
expression是css中的一个行为,IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等Javascript表达式计算的结果。如下background-color等于后面表达式的计算结果:
background-color:expression(this.background-color=((this.rowIndex)%2==0)?'#a5e5aa':'#d9ffdc');
可惜这个CSS表达式在firefox里不支持,完整代码如下:
<html>
<head>
<title>在样式里写expression表达式,来实现隔行变色</title>
<style type="text/css">
.tbDatalist
{
border: 1px solid #007108;
width: 60%;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
}
.tbDatalist th
{
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
}
.tbDatalist td
{
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
}
.tbDatalist tr{
/* expression在firefox里无效果 */
background-color:expression(this.background-color=((this.rowIndex)%2==0)?'#a5e5aa':'#d9ffdc');
/* 以下写法在IE里可以,而且background-color不能改为bgcolor,但是在firefox里无效果
background-color:expression((this.sectionRowIndex%2==0)?"#a5e5aa":"#d9ffdc")}
*/
}
</style>
</head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名</th>
<th scope="col">班级</th>
<th scope="col">出生日期</th>
<th scope="col">星座</th>
<th scope="col">电话</th>
</tr>
<tr>
<td>slepox</td>
<td> W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
</table>
</body>
</html>
四、利用JQuery隔行给TR的class赋值,来实现隔行变色
利用JQuery这种方法是我推荐的,因为我们至少不用担心浏览器兼容问题,而其代码又少,只需一行:
$("table.tbDatalist tr:nth-child(odd)").addClass("altrow");
tr:nth-child(odd)代表找到tr集合中为奇数的那些行,也可以写成 tr:nth-child(1),注意:nth-child从1开始的,而:eq()是从0算起的。nth-child(n)代表在一个文档树中,从父元素中选择第n个子元素。
完整代码如下:(jquery-1.4.1-vsdoc.js)为VS.NET2010自带的JQuery包
<html>
<head>
<title>利用JQuery隔行给TR的class赋值,来实现隔行变色</title>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<style type="text/css">
.tbDatalist
{
border: 1px solid #007108;
width: 60%;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
}
.tbDatalist th
{
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
}
.tbDatalist td
{
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
}
.tbDatalist tr.altrow
{
background-color: #a5e5aa;
}
</style>
<script type="text/javascript">
$(function() {
$("table.tbDatalist tr:nth-child(odd)").addClass("altrow");
});
</script>
</head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名</th>
<th scope="col">班级</th>
<th scope="col">出生日期</th>
<th scope="col">星座</th>
<th scope="col">电话</th>
</tr>
<tr>
<td>slepox</td>
<td> W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
</table>
</body>
</html>