利用jQuery的组合实现表格的奇偶行背景色，并设置鼠标移动到表格行上时行的背景色。

最新推荐文章于 2022-03-31 16:56:35 发布
最新推荐文章于 2022-03-31 16:56:35 发布
阅读量1.3k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_w_J_/article/details/80309785
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.11.0.js"></script>
        <script language="JavaScript" src="js/jquery-1.11.0.js"></script>
        <script>
            $(document).ready(function(){
                $("tr:even").css("background-color","aquamarine");
                $("tr:odd").css("background-color","antiquewhite");
                $("tr").hover(function(){
                    $(this).css("background-color","darksalmon");/*鼠标停在表格上的事件*/
                });
                $("tr:even").mouseout(function(){/*鼠标离开偶数行上的事件*/
                    $(this).css("background-color","aquamarine");
                });
                $("tr:odd").mouseout(function(){/*鼠标离开奇数行上的事件*/
                    $(this).css("background-color","antiquewhite");
                });
            });
        </script>
    </head>                                                          
    <body>
        <table style="width: 200px;height: 100px;" align="center" border="1" cellspacing="0" cellpadding="0" id="mytable">
            <tr>
                <td>序号</td><td>名字</td>
            </tr>
            <tr>
                <td>1</td><td>张三</td>
            </tr>
            <tr>
                <td>2</td><td>李四</td>
            </tr>
            <tr>
                <td>3</td><td>王五</td>
            </tr>
        </table>
    </body>
</html>

L_w_J_
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jq匹配偶数行_jquery怎么实现奇偶行不同背景颜色？
weixin_39562579的博客
12-20 401
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。代码如下所示：.odd {background-color:yellow;}.even {background-color:red;}No.10001No.20002No.30003No.40004显示效果：但是假设表格有上百行甚至上千行，同时不...
jquery 表格的增加删除和修改及设置奇偶行颜色
热门推荐
MoreWindows Blog
12-08 2万+
最近一周在学了一点点HTML, CSS, javascript，用javascript的jquery完成了一个简单的表格操作，有增加、删除和修改功能。表格分三列，第一列是学生编号（ID号），第二列是学生姓名，第三列为学生年龄。在姓名和年龄框内输入数据，再点“Add”就可以增加数据（ID号会自动递增的生成），输入ID号再输入新的姓名和年龄点“Edit”就可以修改，删除的话输入ID号就点“Delete
JQuery来控制表格奇偶行的不同背景颜色显示
lishirong_李世荣的专栏
12-02 3353
概述：JQuery通过操作DOM来控制页面的显示。来看代码：       jQuery使不同行变不同的颜色    -->     .odd{background-color:#FFCCFF;} .even{ background-color:#CCFFFF;} .highlight{background-color:00FF00;}        $(document).ready(functi
用jquery控制表格奇偶行及活动行颜色
weixin_30635053的博客
04-18 132
　　虽然jquery流行已经很多年了，一直都感觉很难，也没有花时间去学习它，只是偶尔哪天心血来潮了去看一点点，时隔多日又会忘得一干二净。最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。　　先定义好表格的奇偶行样式，如下代码： b...
jQuery 实现 当鼠标放表格行上的时候改变背景色。
用自己的双手敲出完美的世界！
12-02 8777
今天是学习jQuery第一天，以前看过，但是没有狠下心去学习，今天起，狠下心来好好学。jQuery的事件去掉了js中的on 比如 onclick 在jQuery 中就是click.下面是我今天写的一个例子，当鼠标放在行上的时候改变背景色。 无标题页<!-- $(function(){ $("#tb tr").mouseove
jQuery实现表格奇偶行显示不同背景色 就这么简单
10-20
通过这种方式，我们只需要几行 jQuery 代码就能实现对大量表格行背景色的动态设置，极大地提高了工作效率。这也体现了 jQuery 的强大之处，它简化了对 DOM 操作的复杂性，使得开发者能够更加专注于功能的实现，而...
jquery css 设置table的奇偶行背景色示例
10-25
### 使用jQuery和CSS设置表格奇偶行背景色 在网页设计与开发中，为了提高表格数据的可读性，我们经常需要对表格中的奇数行和偶数行设置不同的背景颜色。这种做法不仅可以使表格看起来更加美观，还能帮助用户更轻松...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
接下来是CSS部分，定义了三种样式类：`.evenRow`（偶数行背景色）、`.oddRow`（奇数行背景色）和`.activeRow`（鼠标悬停时的高亮显示）： ```css table { border-collapse: collapse; border: none; width: 20%;...
jQuery+css打造table中奇偶行不同样式鼠标移上tr变色
keenweiwei的专栏
06-25 2385
jQuery+css打造table中奇偶行不同样式鼠标移上tr变色 http://blog.sina.com.cn/s/blog_6aadfb2a0100lrlm.html
jquery 改变table选中行背景色
zhangyongbink的博客
03-30 2068
$(function(){ $("#id_detailTable").find('tr').click(function(){ $("#id_detailTable").find('tr').css('background-color','white'); $(this).css('background-color','#e2f5ff'); /**选中行改变背景色**/ }); });
自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)
03-20
NULL 博文链接：https://zzym.iteye.com/blog/762912
jquery css 设置table的奇偶行背景色
人生若南柯一梦
12-05 2547
.even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF9900;} $(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); });
【Javascript】【jQuery】jQuery实现表格奇偶行异色效果
天天向上 Up Up Up (*^▽^*)
04-17 472
<script type="text/javascript" src="jquery-3.4.0.js"></script> <script type="text/javascript"> $(() => { $("td").css("width", "200px"); ...
Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化。
u013568834的专栏
10-13 839
.table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size: 12px; } .normalEv
jquery 控制html页面表格当中奇偶行颜色不同 鼠标悬停变色
weishuxiao1的专栏
07-11 3564
jQuery一句话搞定 $(document).ready(function() { //奇偶行分色 jquery一句搞定 就是这么简单 $("tr:even").css("background-color","#B2E0FF"); //下拉树形菜单 $(".user_done").click(function() { $(".user_did"). toggle();
利用jQuery和JS实现奇偶行背景颜色自定义效果
David_Tsai23的专栏
02-13 879
利用jquery实现 "http://www.w3.org/TR/html4/loose.dtd"> http://www.w3.org/1999/xhtml"> New Web Project $(function(){ //可以是:$('#t1 tbody tr:even').css('background','red'); $('#t1
使用jquery实现如下界面效果（表格，奇偶行颜色不同）
scscdstfxqxxzqqc的博客
03-31 2954
使用jquery实现如下界面 提示： 1、奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500 2、选中行时，设置单选框选中状态 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入jquery库 --> <script src="../js/jquery.min.js" type="text/javascrip
JQuery和JS实现奇偶行不同背景颜色
rotating_windmill
11-17 1610
JQuery实现: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> New Web Project $(function(){ //可以是:$('#t1 tbody tr:even').
用jQuery表格第一行设置区别于表格主体的背景色和字体
最新发布
05-10
可以通过设置CSS样式来实现。首先，给表格的第一行添加一个特定的类名，比如"first-row"。...这段代码将在页面加载完成后运行，选中表格的第一行，并将该类名添加到该行中，从而实现了区别于表格主体的背景色和字体。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值