900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 实现表格隔行变色研究

实现表格隔行变色研究

时间:2019-09-23 17:32:46

相关推荐

实现表格隔行变色研究

表格隔行变色,是很多项目中经常用到的,今日闲着没事就对表格隔行变色做了些研究,这里共找了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>189</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>189</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>189</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)为自带的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>189</td>

</tr>

</table>

</body>

</html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。