<style type="text/css">
    table{border-collapse:collapse;border:1px solid #999;}
 td{border:1px solid #999;}

#table tr.color1{
    background-color:#fafafa;
}
    #table tr.color2{
    background-color:#f7fbfe;
}
 </style>

<script type="text/javascript">

var tableid='table';      
  var overcolor='#EEEEEE';   
  var color1='#FFFFFF';       
  var color2='#F8F8F8';       
  
  var tablename=document.getElementByIdx_x_x(tableid)
  
  var tr=tablename.getElementsByTagName_r("tr")
 
     for(var i=1;i<tr.length;i++){
       tr[i].onmouseover=function(){
       this.style.background=overcolor;
     }
     tr[i].onmouseout=function(){
       if(this.rowIndex%2==0){ //获取当前行的索引
 this.style.background=color1;

}else{
      this.style.background=color2;
    }
     }
     if(i%2==0){
        tr[i].className='color1';
     }else{
         tr[i].className='color2';
     }
    
  }
  }
  window.onload=showtable;
</script>

首先是: i/2==0判断是否是偶数

==================================================

jquery 判断

<script type="text/javascript">
$(document).ready(function(){
       $(".table tr:even").addClass("alt");
  $(".table tr").mouseover(function(){ 
             
        $(this).addClass("over");}).mouseout(function(){
                                //给这行添加class值为over,并且当鼠标一出该行时执行函数
        $(this).removeClass("over");}).click(function(){ //移除该行的class
  
 $(this).toggleClass("click").removeClass("alt")})
});
</script>

执行点击时:切换颜色.并且移除原有的背景色。

=======================方法1==============

//test
 $(".test tr:even").addClass('odd');
     $(".test tr").hover(function(){$(this).addClass('highlight')},function(){$(this).removeClass('highlight')});
  //click
  $(".test tr").click(function(){
    $(this).toggleClass('selected');
  })

==============方法2(推荐)===============

$(".test tr:even").addClass('odd');
     $(".test tr").hover(function(){$(this).addClass('highlight')},function(){$(this).removeClass('highlight')});
  //默认选中添加样式
  $(this).find("input[type=checkbox]:checked").parents('tr').addClass('selected');
  //click
 
  $(".test tr").click(function(){

if($(this).hasClass('selected')){
 
   $(this).removeClass('selected');
 
   $(this).find("input[type=checkbox]").removeAttr('checked');
  
 }else{
   $(this).addClass('selected');
    $(this).find("input[type=checkbox]").attr("checked",true); 
 }
  })

参考:http://www.codefans.net/jscss/code/2542.shtml

Table tr 的隔行变色的更多相关文章

  1. (转)适用微信小程序的table表格(带隔行变色)

    原文地址 table.wxml <view class="table"> <view class="tr bg-w"> <view ...

  2. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

  3. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  4. css 实现table 隔行变色

    <html> <head> <title>Member List</title> <style> <!-- .datalist{ bo ...

  5. 关于table的td和ul元素li隔行变色的功能实现

    table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

  6. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  7. 【丛林】HTML Table 表格浅谈(边框、隔行变色

    此例子已经包含本文大部分内容,请对照参考.查看代码 > 定义和用法 table标签定义 HTML 表格. 创建表格的四要素:table.tr.th.td <table> 整个表格以& ...

  8. table隔行变色

    table tr:nth-child(2n) {         background: #EEF8F0;     }     table tr:nth-child(2n+1) {         b ...

  9. jquery table的隔行变色 鼠标事件

    一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...

随机推荐

  1. 输入url后发生了什么

    (1)浏览器解析 (2)查询缓存 (3)DNS查询 顺序如下,若其中一步成功直接进去建立连接部分: -- 浏览器自身DNS -- 操作系统DNS -- 本地hosts文件 -- 像域名服务器发送请求 ...

  2. ThreadLocal 的分析

    http://blog.csdn.net/LHQJ1992/article/details/52451136 个人感觉这是所有关于ThreadLocal里中最靠谱的一篇文章. ps:其实官方文档才是最 ...

  3. 图论trainning-part-1 E. Invitation Cards

    E. Invitation Cards Time Limit: 8000ms Memory Limit: 262144KB 64-bit integer IO format: %lld      Ja ...

  4. Leetcode 400.第n个数

    第n个数 在无限的整数序列 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ...中找到第 n 个数字. 为整形范围内 ( n < 231). 示例 1: 输入: 3 输出 ...

  5. BZOJ 3227 [Sdoi2008]红黑树(tree) ——贪心 动态规划

    首先可以想到一个贪心的方法,然后一层一层的合并. 也可以采用动态规划的方式,为了写起来好写,把点数*2+1,然后发现在本机上跑不过1500的数据. 交上去居然A掉了. 贪心 #include < ...

  6. 【基础操作】FFT / DWT / NTT / FWT 详解

    1. 2. 点值表示法 假设两个多项式相乘后得到的多项式 的次数(最高次项的幂数)为 $n$.(这个很好求,两个多项式的最高次项的幂数相加就得到了) 对于每个点,要用 $O(n)$ 的时间 把 $x$ ...

  7. django 和 mongdb 写一个简陋的网址,以及用django内置的分页功能

    https://github.com/factsbenchmarks/simple_websit_about_58 一 设置 数据库的设置 在settings文件中加入这样一段代码: from mon ...

  8. 大数(bzoj 4542)

    /* 想了半天莫队,不知道咋转移,需要动下脑子. 有一个很显然的结论是如果(l,r)是P的倍数,那么s[l...n]%P=s[r+1...n]%P. 根据这个东西,我们预处理出所有的后缀%P的余数,接 ...

  9. 理解 Nova 架构

    Compute Service Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源. OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nov ...

  10. CKeditor如何实现图片上传功能

    http://makaiyuan.blog.51cto.com/5819595/1049521 如何在数据库中导入excel文件内的数据:http://jingyan.baidu.com/album/ ...