实现表格隔行变色研究

来源：互联网发布：淘宝食品打假编辑：程序博客网时间：2024/04/30 10:19

表格隔行变色，是很多项目中经常用到的，今日闲着没事就对表格隔行变色做了些研究，这里共找了4种方法，所有方法实现的效果如下：

一、隔行给TR的class赋值，来实现隔行变色

首先在样式里建立表格隔行变色的样式累类，如下代码：

         .tbDatalist tr.altrow
        {
            background-color: #a5e5aa;
        }

然后在table的隔行tr里，增加此样式<tr class="altrow">，这种方式比较原始和麻烦

完整代码如下：

<html>

<head>

<title>隔行给TR的class赋值，来实现隔行变色</title>

.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>

<tr>

</tr>

<tr>

<td>slepox</td>

<td>Scorpio</td>

</tr>

<td>smartlau</td>

<td>Capricorn</td>

</tr>

<tr>

<td>linear</td>

</tr>

<td>laopiao</td>

<td>Taurus</td>

</tr>

<tr>

<td>dovecho</td>

<td>Sagittarius</td>

</tr>

</table>

</body>

</html>

二、利用JS脚本，循环判断表格调用样式，来实现隔行变色

基于第一种方式比较麻烦，我们可以加入脚本，来循环表格行，如果是偶数行的话，就对此行增加class样式。

oTable.rows[i].className = "altrow"; //altrow为预定义的样式

或者直接写代码增加样式

oTable.rows[i].style.backgroundColor = "#a5e5aa";

完整代码如下：

<html>

<head>

<title>利用JS脚本，循环判断表格调用样式，来实现隔行变色</title>

.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>

//利用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>

<tr>

</tr>

<tr>

<td>slepox</td>

<td>Scorpio</td>

</tr>

<tr>

<td>smartlau</td>

<td>Capricorn</td>

</tr>

<tr>

<td>linear</td>

</tr>

<tr>

<td>laopiao</td>

<td>Taurus</td>

</tr>

<tr>

<td>dovecho</td>

<td>Sagittarius</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>

.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>

<tr>

</tr>

<tr>

<td>slepox</td>

<td>Scorpio</td>

</tr>

<tr>

<td>smartlau</td>

<td>Capricorn</td>

</tr>

<tr>

<td>linear</td>

</tr>

<tr>

<td>laopiao</td>

<td>Taurus</td>

</tr>

<tr>

<td>dovecho</td>

<td>Sagittarius</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>

.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>

$(function() {

$("table.tbDatalist tr:nth-child(odd)").addClass("altrow");

});

</script>

</head>

<body>

<tr>

</tr>

<tr>

<td>slepox</td>

<td>Scorpio</td>

</tr>

<tr>

<td>smartlau</td>

<td>Capricorn</td>

</tr>

<tr>

<td>linear</td>

</tr>

<tr>

<td>laopiao</td>

<td>Taurus</td>

</tr>

<tr>

<td>dovecho</td>

<td>Sagittarius</td>

</tr>

</table>

</body>

</html>