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>
全部源码:


猜你喜欢
Mac上Go环境和VS Code的正确安装与配置方法

ASP下批量删除数据的两种方法
python 动态迁移solr数据过程解析

vue使用canvas绘制圆环

Python进阶之使用selenium爬取淘宝商品信息功能示例
python环境中的概念conda中与环境相关指令操作

基于Python实现网页文章转PDF文档

获取 Textarea 的光标位置
python设计模式之抽象工厂模式详解

网站图片与文本谁更重要?(中英文对照)
Python接口自动化浅析数据驱动原理

Python Pandas的concat合并

如何利用python写GUI及生成.exe可执行文件

ASP开发10条经验总结
隐藏并修改文件的最后修改时间的asp-webshell

Google 地图API Map()构造器详解
python实现合并两个数组的方法
10行Python代码实现Web自动化管控的示例代码

Bootstrap实现提示框和弹出框效果

深入了解Python的异常处理机制
