您的位置:首页 > Web前端 > JavaScript

js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等

2012-02-29 20:25 1031 查看
如果表格的数据比较多的话,表格颜色很单一看起来很不方便,看到一些网站将每行的颜色隔行改掉,很清晰。

其次如果表格的每行信息很多的话,一个不小心会看跑偏,所以在此为大家提供一个解决的办法,但鼠标放上去时,该行的颜色会变成独一无二的背景颜色。

这两种效果都是改变tr的className从而达到改变tr属性的效果。

效果图如下(选中的那行就是鼠标放上去的那行,由于截图较为垃圾,所以没有截到鼠标):



代码:::

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js实现表格隔行变色效果</title>

<style>

.top{

background-color:#F93;

color:#30C;}

table{

border:1px #000 dashed;

border-collapse:collapse; /*border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。

值 描述

separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit 规定应该从父元素继承 border-collapse 属性的值。

*/

}

td,th{

border:#000 1px solid;

text-align:center;}

.one{

background-color:#066;

}

.two{

background-color:#9F9;

}

.over{

background-color:#6CF;}

</style>

<script language="javascript">

function geHang(){

//获取所有的tr

var trlist=document.getElementsByTagName("tr");

//判断从第二个tr起到倒数第二个tr的tr标签,因为获取tr的对象数组是从下标是从0开始的所以第二就是下表为1的tr标签倒数第二tr也就是trlist.length-1.

for(var i=1;i<trlist.length-1;i++){

//对对象的下标i判断,是偶数用className为one,else则为two,one和two是两种不同的属性

if(i%2==0){

trlist[i].className="one";

}else{

trlist[i].className="two";

}

//此处是鼠标放上去和移开是的一个效果,也是通过改变tr的className实现的

//先将鼠标一上去的那个tr的本身的颜色保存下来,以便移走后改回来原来颜色用

var oldcolor;

//给每个tr加上onmouseover事件(鼠标放上去触发)

trlist[i].onmouseover=function(){

//当鼠标放上去是先将本身的class属性给了oldcolr。

oldcolor=this.className;

//然后将自己的className改为over,引用over的属性,this指的是鼠标放上去的那个tr对象。

this.className="over";

}

//给每个tr加上onmouseout事件(鼠标离开时触发)

trlist[i].onmouseout=function(){

//当鼠标离开时将原来的className改回来,继续用原来的className属性

this.className=oldcolor;

}

}

}

</script>

</head>

<body onload="geHang()">

<table width="621" border="1" align="center">

<tr class="top">

<th width="105"><A href="javascript:selectAll('qx')" type=all>全选</A></th>

<th width="111">发件人</th>

<th width="128">邮件名称</th>

<th width="249">邮件附属信心</th>

</tr>

<tr>

<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr class="top">

<td><A href="javascript:selectAll('qx')" type=all>全选</A></td>

<td colspan="3">

<A href="javascript:selectAll('qx')" type=all>全选</A> - 

<A href="javascript:selectAll('fx')" type=reverse>反选</A> - 

<A href="javascript:selectAll('qbx')" type=no>全不选</A> - 

<INPUT class="Btn BtnNml" hideFocus type=button value="删除所选附件" outClass="Btn BtnNml ImpBtn" overClass="Btn BtnHv ImpBtn" action="move" onClick="del('./delGoods.php');" />

</td>

</tr>

</table>

<!--全选反选和全不选就是传过去一个type值,根据type的值将idlist[]复选框的状态改掉就可以了-->

<script language="javascript">

function selectAll(type)

{

var arrObj=document.getElementsByName("idlist[]");

if(type=="qx"){

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

arrObj[i].checked=true;

}

} else if(type=="qbx"){

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

arrObj[i].checked=false;

}

} else if(type=="fx"){

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

if(arrObj[i].checked==false){

arrObj[i].checked=true;

} else{

arrObj[i].checked=false;

}

}

}

}

</script>

</body>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐