css学习笔记：表格隔行点击变色
来源：好好的好好 时间：2009-04-30 13:15:00
我们经常会用到表格数据，在做表格的时候，一般都喜欢隔行变色，使表格表现数据的时候非常的清晰。
如图，我设计的一个表格表现的样式：
在网上找到一个非常好的表格隔行点击变色效果的制作方法，我认为这个作法是比较实用的。
● 在head和body区分别加上JS：
<script language="javascript"><!--
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";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断
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>
<script language="javascript"><!--
//changecolor("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("changecolor","#f8fbfc","#e5f1f4","#ecfbd4","#bce774");
--></script>
● 给table赋一个ID:changecolor
<table class="warp_table" id="changecolor">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
全部源码：
0
投稿猜你喜欢
XML编程实例：用ASP+XML打造留言本
getWindow与isWindow
在MySQL中使用更新日志文件
账户名和密码漏输或误输的文字提示
设计师和美工
JS复制特定内容到粘贴板
如何解决客户机页面刷新时连接不上数据库问题？
asp如何修改WINNT的登录密码？
thinkphp5实用入门进阶知识点和各种常用功能代码汇总
10个美观实用的 jQuery/Mootools 日历插件
网页制作,改变你的思维方式
Javascript编写Asp时需要注意的一些地方
创建IE各版本专属CSS方法
各浏览器 CSS Hack 整理
图标设计常犯的10种错误
MYSQL教程:MYSQL字符集支持
SQL Server 2005恢复Master库
