网页表格隔行换色+高亮当前行源码

网站中很多时候用到表格处理数据时，为了获得更好的用户体验，往往将表格隔行换色，而且高亮鼠标所指行，下面分享一种简单的实现方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>表格table隔行换色以及点击整行变色</title>

.warp_table {border-collapse:collapse; width:550px; border:1px solid #4d9ab0}

.warp_table td {border:1px solid #4d9ab0}

</style>

function senfe(o,a,b,c,d){

var t=document.getElementById(o).getElementsByTagName("tr");

for(var i=0;i<t.length;i++){

t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;

t[i].onclick=function(){

if(this.x!="1"){

this.x="1";

this.style.backgroundColor=d;

}else{

this.x="0";

this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

}

t[i].onmouseover=function(){

if(this.x!="1")this.style.backgroundColor=c;

}

t[i].onmouseout=function(){

if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

}

--></script>

</head>

<body>

<h1>表格table隔行换色以及点击整行变色</h1>

<h3><a href="http://www.vvschool.cn" style="color:#000;">www.vvschool.cn</a></h3>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");

senfe("changecolor","#f8fbfc","#e5f1f4","#ecfbd4","#bce774");

--></script>

</body>

</html>

上一篇：表格进阶(TABLE ADVANCED)

下一篇：关掉页面时弹出告别语代码