3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。

一、纯CSS3实现表格隔行变色

3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

关键CSS代码介绍

table tr:nth-child(odd){background:#F4F4F4;}
table td:nth-child(even){color:#C00;}
table tr:nth-child(5){background:#73B1E0;color:#FFF;}

二、jquery实现表格奇数行和偶数行交替显示不同的背景颜色

3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

<html>
<head>
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("tr:even").css("background","#090");
$("tr:odd").css("background","red");
})
</script>
</head>
<body>
<table width="400" >
  <tr>
    <td>www.125jz.com</td>
  </tr>
  <tr>
    <td>网页设计教程</td>
  </tr>
 <tr>
    <td>www.125jz.com</td>
  </tr>
  <tr>
    <td>网页设计教程</td>
  </tr>
</table>
</body>
</html>

三、jquery实现表格隔行变色、鼠标悬停高亮

3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

<!doctype html>
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>表格隔行变色_CSS实现鼠标悬停高亮</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />        
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        //通过jQuery控制表格隔行换色,并鼠标悬停变色
        $('tr:even:gt(0)').addClass('tr_even');    //默认偶数行背景色,无视标题行用:gt(0)
        $('tr:odd').addClass('tr_odd');            //默认奇数数行背景色
    });        
    </script>
    <style type="text/css">
    .headCls{background-color:#ccc;}    /* 标题背景色 */
    .tr_even{background-color:#EBF8FF}  /* 偶数行背景色 */
    .tr_odd{background-color:#DDECF3}   /* 奇数行背景色 */   
    .tr_even:hover,.tr_odd:hover{background-color:red;}      /* 通过CSS实现鼠标悬停高亮色 */
    </style>
</head>
<body>
    <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr class="headCls">
            <th>CSS实现鼠标悬停高亮</th>
            <th>CSS实现鼠标悬停高亮</th>
        </tr>
        <tr>
            <td>data1_1</td>
            <td>data1_2</td>
        </tr>
        <tr>
            <td>data2_1</td>
            <td>data2_2</td>
        </tr>
        <tr>
            <td>data3_1</td>
            <td>data3_2</td>
        </tr>
        <tr>
            <td>data4_1</td>
            <td>data4_2</td>
        </tr>
        <tr>
            <td>data5_1</td>
            <td>data5_2</td>
        </tr>
    </table>
</body>
</html>

 

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2483.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年9月5日 上午9:08
下一篇 2018年9月5日 上午10:20

99%的人还看了以下文章

  • 纯CSS制作红色网站二级下拉导航菜单

    纯CSS制作红色网站二级下拉导航菜单,代码非常简洁,适合修改后使用,入门就能掌握。 二级下拉导航菜单HTML代码: <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

    2019年4月17日
    3.9K0
  • 跟永哥学HTML5(3):HTML5新增语义化元素的使用

    上节课我们讲了html5与html4的区别,Html5对语法进行了简化,一个htm5文档结构代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

    2018年1月26日
    3.6K1
  • jquery全选和反选功能代码,兼容所有浏览器

    <!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码,兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…

    2019年11月1日
    2.2K0
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    3.3K0
  • 响应式布局和自适应的区别

    客户端,PC、平板、手机,各种尺寸,要给电脑PC和手机分别设计不同的网页吗?要给每一个手机分别设计一个网页吗? 不需要,因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别: 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小,宽度通常在600像素以下,pc…

    2019年10月15日
    2.3K0
  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    1.4K0

发表回复

登录后才能评论