JQuery来控制表格奇偶行的不同背景颜色显示

最新推荐文章于 2023-10-03 16:51:30 发布
最新推荐文章于 2023-10-03 16:51:30 发布
阅读量3.3k 收藏
点赞数 1
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishirong/article/details/41674431
版权

概述：JQuery通过操作DOM来控制页面的显示。来看代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery使不同行变不同的颜色</title>
    <!-- <link rel="stylesheet" type="text/css" href="../css/style.css">-->
    <style type="text/css">
 .odd{background-color:#FFCCFF;}
 .even{ background-color:#CCFFFF;}
 .highlight{background-color:00FF00;}
</style>
 <script type="text/javascript" src="../js/jquery.js"> </script>
    <script type="text/javascript">
  $(document).ready(function(){
   $('#tbody1 tr:odd').filter(':gt(0)').addClass('odd');
   $('#tbody1 tr:even').filter(':gt(0)').addClass('even'); 
   $('#tbody1 td:contains("Because of you")').addClass('highlight');
});
 </script>

  </head>
 
  <body>
    <table border="1">
    <thead><tr><td colspan="2">我是标题</td></tr></thead>
    <tbody id="tbody1">
    <tr>
     <td>很爱很爱你</td><td>刘若英</td>
    </tr>
    <tr>
     <td>荷塘月色</td><td>周杰伦</td>
    </tr>
    <tr>
     <td>约定</td><td>周惠</td>
    </tr>
    <tr>
     <td>I have not been to the oxford</td><td>unknown</td>
    </tr>
    <tr>
     <td>Because of you</td><td>unkonwn</td>
    </tr>
    <tr>
     <td>Only玉</td><td>罗家英</td>
    </tr>
    <tr>
     <td>一生有你</td><td>水木年华</td>
    </tr>
    <tr>
     <td>流年</td><td>王菲</td>
    </tr>
    <tr>
     <td>记事本</td><td>陈慧琳</td>
    </tr>   
    </tbody>
    </table>
  </body>
</html>

 

从上文不难看出，代码中的精华在于：

 <script type="text/javascript" src="../js/jquery.js"> </script>
    <script type="text/javascript">
  $(document).ready(function(){
   $('#tbody1 tr:odd').filter(':gt(0)').addClass('odd');
   $('#tbody1 tr:even').filter(':gt(0)').addClass('even'); 
   $('#tbody1 td:contains("Because of you")').addClass('highlight');
});
 </script>

这其中，even代表偶数行，tbody中第一行代表0，以此类推，filter(':gt(0)')这样的东西代表分别在奇数行或者偶数行中的第一行，等下看几个效果图你就了然了。第三个td:contains("Because of you")是指在tbody中对匹配Because of you进行highlight的样式显示。来看效果：

1.奇偶行均加入条件

JQuery来控制表格奇偶行的不同背景颜色显示 - lishirong - The CTO of LiShirong

 2.仅对偶数行行加入条件

JQuery来控制表格奇偶行的不同背景颜色显示 - lishirong - The CTO of LiShirong

 3.奇偶行均加不入条件

JQuery来控制表格奇偶行的不同背景颜色显示 - lishirong - The CTO of LiShirong

 4.去掉特定筛选条件

JQuery来控制表格奇偶行的不同背景颜色显示 - lishirong - The CTO of LiShirong

 
你想要的又是哪种效果呢？快去酌情改改吧

李世荣
关注
专栏目录
jQuery实现表格奇偶行显示不同背景色 就这么简单
01-21
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示： <html> <style type=text/css> .odd { background-color:yellow; } .even { background-color:red; } </style> <body> <table border=1> <tr class=odd> <td>No.1</td> <td>0001</td> </tr> <tr class=even> <
jq匹配偶数行_jquery怎么实现奇偶行不同背景颜色？
weixin_39562579的博客
12-20 419
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。代码如下所示：.odd {background-color:yellow;}.even {background-color:red;}No.10001No.20002No.30003No.40004显示效果：但是假设表格有上百行甚至上千行，同时不...
用jquery控制表格奇偶行及活动行颜色
weixin_30635053的博客
04-18 143
　　虽然jquery流行已经很多年了，一直都感觉很难，也没有花时间去学习它，只是偶尔哪天心血来潮了去看一点点，时隔多日又会忘得一干二净。最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。　　先定义好表格的奇偶行样式，如下代码： b...
如何用jquery控制表格奇偶行及活动行颜色
年华
08-10 477
先定义好表格的奇偶行样式，如下代码： body { font-size:12px; } th { color: #FFFFFF; background: #A172AC; } table,table td,table th { padding: 0.5em; margin: 0; border:0; border-spacing:0
jquery怎么设置表格奇偶行不同的颜色？
qq_45991812的博客
06-22 1550
在jQuery中使用“$("tr:odd").css("background-color","颜色")”与“$("#tr:even").css("background-color","颜色")”即可设置表格奇偶行颜色不同。
利用jQuery的组合实现表格的奇偶行背景色，并设置鼠标移动到表格行上时行的背景色。
L_w_J_的博客
05-14 1385
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="utf-8" /&gt;        &lt;title&gt;&lt;/title&gt;        &lt;script src="js/jquery-1.11.0.js"&gt;&lt;/s
表格奇偶行设置不同颜色的核心JS代码
10-26
jQuery提供了一种简单的方式来选择和操作DOM元素，我们可以利用它来选择表格中的奇数行或偶数行，并应用不同的样式。 首先，需要引入jQuery库。如文档中所示，可以通过在HTML文档的部分添加一个标签来引入。文档中...
jquery css 设置table的奇偶行背景色示例
10-25
### 使用jQuery和CSS设置表格奇偶行背景色 在网页设计与开发中，为了提高表格数据的可读性，我们经常需要对表格中的奇数行和偶数行设置不同的背景颜色。这种做法不仅可以使表格看起来更加美观，还能帮助用户更轻松...
利用JQuery和JS实现奇偶行背景颜色自定义效果
10-27
本文将详细探讨如何利用JavaScript（JS）和JQuery库实现网页中表格行（tr元素）的奇偶行背景颜色自定义效果。奇偶行背景颜色差异化是一种常见的用户界面改进，它有助于提高数据的可读性和视觉效果。本文将介绍两种...
jquery表格奇偶行设置不同颜色
Sean.W的专栏
12-24 4371
这是一个比较实用的功能，设置奇偶行颜色不同后阅读表格数据的体验明显变好，否则数据会显得非常繁杂拥挤（当表格数据行多时体验尤为明显）。只有当你自己真正做这方面的东西接触到时才有强烈的体会，反正我是刚刚经历了，留在这里备参考吧~ 核心JS脚本代码如下（table元素的id根据自己的情况调整） $(document).ready(function(){ SetTableR
jquery 实现表格奇数偶数行颜色不一样 ，可以实现不同的效果，区分奇数偶数行
pf1234321的专栏
10-04 5688
New Document             /*   window.onload = function()   {     var myTable = document.getElementById("table1");     var myTBody = myTable.getElementsByTagName("tbody")[0];    
html奇偶行颜色,jquery实现奇偶行不同颜色的方法
weixin_42196279的博客
06-19 1013
jquery实现奇偶行不同颜色的方法发布时间：2020-12-28 09:12:07来源：亿速云阅读：74作者：小新这篇文章主要介绍了jquery实现奇偶行不同颜色的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。在jquery中，可以使用“$(":odd")”和“$(":even")”选择器分别选中奇行和偶行的元素，然后使用cs...
用jquery技术实现table的奇数行变色
东方势力的博客
10-13 1921
完整代码： .red2 { background: #eeeeee; } $(function(){ //查询按钮 //奇数航变色 $("#table1 tr:even").addClass("red2"); });                               员工ID                  
使用jQuery实现表格的隔行变色
HackMasterX的博客
10-03 609
隔行变色是Web开发中常见的需求之一，通过给表格的奇偶行添加不同的背景色，可以增加表格的可读性和美观性。在本文中，我们将介绍如何使用jQuery来实现这个功能。接下来，我们需要给目标表格的奇偶行添加不同的背景色。我们可以使用jQuery的选择器和遍历方法来实现这个功能。首先，我们需要在页面中引入jQuery库。你可以将以上代码复制到你的HTML文件中，并根据需要修改选择器和颜色值来适应你的具体情况。在迭代的过程中，根据行的奇偶性使用。选择器选中了表格中的所有行，并使用。在上面的代码中，我们使用了。
使用jQuery设置表格行的不同颜色
CsCufft的博客
09-19 260
在网页开发中，经常需要对表格进行样式设置，其中一项常见的需求是为表格的每一行设置不同的背景颜色。使用jQuery可以很方便地实现这个效果。下面将详细介绍如何使用jQuery设置表格行的不同颜色，并提供相应的源代码示例。
jQuery:表格的奇偶行变色，jquery实例之表格隔一行
飞鸟的博客
11-12 655
jQuery:表格的奇偶行变色           表格变色                .odd{background:#ffffee;}          .even{background:#fff38f;}          .first{background:red;}          .last{background:blue;}          .mouseOv
用jQuery实现表格奇数行显示
最新发布
09-29
在jQuery中，实现表格（table）的奇偶行样式变化通常通过遍历每一行并添加CSS类来完成。假设你想让所有的奇数行变为灰色背景，偶数行保持默认颜色，你可以这样做： ```javascript $(document).ready(function() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值