JQ表格隔行换色

最新推荐文章于 2022-05-16 21:45:30 发布
最新推荐文章于 2022-05-16 21:45:30 发布
阅读量107 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Dainney/p/10312063.html
版权 
 <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            font-size: 15px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        ul {
            list-style: none;
            border: 1px solid #5bc0de;
            width: 600px;
            margin: 0 auto;
            padding: 0px;
        }

        li {
            padding: 10px 30px;
            cursor: pointer;
        }

        .c1 { /*奇数行颜色*/
            background-color: #5bc0de;
        }

        .c2 { /*偶数颜色*/
            background-color: #f7e1b5;
        }

        .c3 { /*移入颜色*/
            background-color: #999;
        }
    </style>
</head>
<body>
<ul>
    <li>A</li>
    <li>B</li>
    <li>A</li>
    <li>B</li>
    <li>A</li>
    <li>B</li>
    <li>A</li>
    <li>B</li>
</ul>
<script type="text/javascript">
 $("li:even").addClass("c2");
 $("li:odd").addClass("c1");
</script>

 

　

　JQ  :even选择器代表着选择偶数行

      JQ   :odd 代表选择奇数行

 

转载于:https://www.cnblogs.com/Dainney/p/10312063.html

weixin_30596165
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现隔行换色
Those who achieve great thing do not stick to trifles
01-31 567
jQuery实现隔行换色 一、步骤分析 1、设计页面 2、通过JQ方式获取标签 3、使用选择器进行奇偶数的选择“标签:odd”偶数。"标签:even"奇数。gt（x）大于X 二、实现代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隔行换色&lt...
使用JQ完成表格隔行换色的简单实例
12-02
总的来说，通过jQuery实现表格隔行换色是前端开发中常见的一种优化手段。它利用了jQuery的选择器功能和CSS的类应用，使得代码更简洁，同时提高了可维护性。在实际项目中，可以根据需求选择直接使用JavaScript设置...
使用jQuery完成隔行换色
03-09 196
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <link rel="stylesheet" href="../css/style.css" ...
Jq实现表格隔行换色
cuterabbitbaby的博客
09-20 235
简单的隔行换色 jq
WEB木易
11-07 563
随手写的大家多包涵 简单的隔行换色 页面 html Title .box{ width: 100px; margin: 0 auto; } .box p{ text-align: center; line-height: 14px; } 1 2
jQuery中实现隔行换色
04-13 370
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> &lt...
使用jquery hover事件实现表格的隔行换色功能示例
10-26
在本文中，我们将探讨如何使用jQuery库中的hover...通过以上描述，我们可以看出，使用jQuery实现表格隔行换色功能既简单又高效。通过合理利用jQuery提供的方法，我们可以在网页设计中创造出更加友好和直观的用户界面。
jQuery实现表格隔行换色
12-11
本文实例为大家分享了jQuery实现表格隔行换色的...使用JQ完成表格隔行换色</title> [removed][removed] [removed] $(function() { $("tbody tr:odd").css("background-color","aquamarine"); $("tbody tr:ev
jquery实现表格隔行换色效果
01-19
本文实例讲述了jquery实现表格隔行换色效果的代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 1、新建一个web项目，jQuery； 2、在WebContent目录下新建script文件夹，将jquery-1.10.1....
jQuery隔行变色
T_Prometheus的博客
09-17 3726
  &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;/head&gt; &lt;script type=&quot
一天搞定jQuery(二)——使用jQuery表格的隔行换色
05-10
一天搞定jQuery(二)——使用jQuery表格的隔行换色
jquery中tablesorter隔行颜色变化以及对应表格拖拽技术
03-01
jquery的表格排序和表格行排序以及表格行拖动功能以及拖动以后仍然保持隔行颜色变化 博文链接：https://dandansdu.iteye.com/blog/239412
jquery案例3——jq隔行换色
努力、拼搏、奋进
05-16 894
一、案例描述 隔行换色 二、案例效果演示 三、案例整体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
jquery实现隔行换色
lmw的专栏
04-23 623
$(document).ready(function(){ $("#tab tr:even").css("background","red"); $("#tab tr:odd").css("background","blue"); }); 第一行第一行 第一行第一行 第一行第一行 第一行第一行 第一行第一行
JQ控制表格隔行换色和悬停换色
空白_回忆的博客
03-25 646
JQ控制表格隔行换色和悬停换色【有志网:woyouzhi.com！发现更好的自己！每天给你坚持下去的动力！】隔行换色：<script type="text/javascript"> $(document).ready(function(){ $('.tablelist tbody tr:odd').addClass('odd'); }); </script> 悬停换色
jquery实现隔行变色
小宁博客
06-05 2397
原文链接：小宁博客 描述：通过jQuery控制表格的奇数行和偶数行的颜色不一样，鼠标经过的时候，颜色变成白色，鼠标离开，颜色恢复原来的颜色。jQuery的版本为1.8 示例代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am
使用jQuery完成表格的隔行换色（对比JavaScript）
weixin_42078450的博客
01-19 308
1、案例描述      开发中，需要表格陈列数据，数据过多不易查看，通过隔行换色进行表示。 2、jQuery代码实现      2.1、理解class操作：             addClass()  给指定标签的class属性追加样式             removeClass()  将标签指定的class属性移除             toggleClass()  切换c...
jQuery学习(四)——使用JQ完成表格隔行换色
anjiukonghe77852的博客
08-24 162
1、步骤分析： 第一步：引入jquery的类库 第二步：直接写页面加载函数 第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。 2、具体代码实现： 1 <!DOCTYPE html> 2 <html> 3 ...
jquery 隔行变色 点击切换
随波主流
03-03 180
$("#add").toggle( function () { $("#adduser").css({"display":"block"}); }, function () { $("#adduser").css({"display":"none"}); } ); );   $(d
jq表格反选功能代码实实现
最新发布
06-11
表格反选功能是指当用户点击“反选”按钮时，会将表格中未选中的行变为选中状态，已选中的行变为未选中状态。下面是一个使用 jQuery 实现表格反选功能的示例代码： HTML代码： ```html <th><input type=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值