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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


全部源码:


 

标签:css,表格,隔行变色,table
0
投稿

猜你喜欢

  • Mac上Go环境和VS Code的正确安装与配置方法

    2024-05-08 10:16:45
  • ASP下批量删除数据的两种方法

    2011-02-05 11:01:00
  • python 动态迁移solr数据过程解析

    2023-03-08 10:19:20
  • vue使用canvas绘制圆环

    2024-05-02 17:04:29
  • Python进阶之使用selenium爬取淘宝商品信息功能示例

    2022-04-26 04:55:15
  • python环境中的概念conda中与环境相关指令操作

    2021-01-09 19:40:55
  • 基于Python实现网页文章转PDF文档

    2022-08-23 08:50:17
  • 获取 Textarea 的光标位置

    2010-11-30 21:33:00
  • python设计模式之抽象工厂模式详解

    2023-06-11 22:15:51
  • 网站图片与文本谁更重要?(中英文对照)

    2008-10-17 10:25:00
  • Python接口自动化浅析数据驱动原理

    2022-02-22 21:52:01
  • Python Pandas的concat合并

    2023-06-08 05:05:38
  • 如何利用python写GUI及生成.exe可执行文件

    2023-06-26 00:42:57
  • ASP开发10条经验总结

    2007-09-30 13:36:00
  • 隐藏并修改文件的最后修改时间的asp-webshell

    2009-02-28 13:31:00
  • Google 地图API Map()构造器详解

    2024-05-05 09:29:04
  • python实现合并两个数组的方法

    2022-05-30 21:40:11
  • 10行Python代码实现Web自动化管控的示例代码

    2021-05-30 17:01:05
  • Bootstrap实现提示框和弹出框效果

    2023-07-02 05:25:33
  • 深入了解Python的异常处理机制

    2023-09-03 09:25:41
  • asp之家 网络编程 m.aspxhome.com