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%的人还看了以下文章

  • 第14课:上传网页

    只要你有服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。

    2018年1月18日
    4.4K1
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    5.1K0
  • css布局基础-盒子模型

    网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    2022年7月14日
    3.2K0
  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    5.1K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    10.9K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    3.4K0

发表回复

登录后才能评论