jquery奇偶行不同底色显示

最新推荐文章于 2021-01-27 02:42:51 发布
最新推荐文章于 2021-01-27 02:42:51 发布
阅读量1.2k 收藏
点赞数 1
文章标签： jquery function xhtml html filter border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quyanli123_126_com/article/details/6456647
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style>
table{ width:400px; border:1px solid #FFF02F;border-collapse:collapse;}
tr{ cursor:pointer;}
td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th{ background:#FFF02F; font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even{ background:#FFF38F;}  /* 偶数行样式*/
.odd{ background:#FFFFEE;}  /* 奇数行样式*/
.selected{ background:#FF6500;color:#fff;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var $trs = $("#trs>tr");  //选择所有行
    $trs.filter(":odd").addClass("odd");  //给奇数行添加odd样式
    $trs.filter(":even").addClass("even");//给偶数行添加odd样式

    //点击行,添加变色样式
    $trs.click(function(e){
        $(this).addClass("selected")
        .siblings().removeClass("selected");
    })

    //实时筛选
    $("#filter").keyup(function(){
        $trs.show();
        if(this.value != "") {
            $trs.hide()
            .filter(":contains('"+this.value+"')").show();
        }
        $trs.removeClass("odd");
        $trs.removeClass("even");
        $trs.filter(":contains('"+this.value+"'):odd").addClass("odd");  //给奇数行添加odd样式
        $trs.filter(":contains('"+this.value+"'):even").addClass("even");//给偶数行添加odd样式
    })
})
</script>
</head>
<body>
过滤:<input type="text" id="filter"/>
<table>
    <thead>
    <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody id="trs">
        <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
        <tr><td>张山sss</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
        <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
        <tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
        <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
        <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        <tr><td>王五fd</td><td>男</td><td>湖南长沙</td></tr>
        <tr><td>找df六</td><td>男</td><td>浙江温州</td></tr>
        <tr><td>Rain12</td><td>男</td><td>浙江杭州</td></tr>
        <tr><td>MAXMAN5</td><td>女</td><td>浙江杭州</td></tr>
    </tbody>
</table>
</body>
</html>

quyanli123_126_com
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jquery过滤器实现隔行变色效果
qq_33663071的博客
01-07 1388
无标题文档 $(function(){ //选中第一个tr元素，设置背景颜色为黑色，字体颜色为白色(过滤器先用类选择器选中后在设定条件。一般是数组形式的，针对特定的一组元素进行设置) $("tr:eq(0)").css({ backgroundColor:"black", color:"white" }); //选中除了第一行以外(下标大于0)的tr元素中下标为奇数的tr，
JQuery实现表格奇偶数行变色
Jyannic的博客
09-11 4131
HTML代码部分start 表格奇偶数行变色     姓名 工资 入职时间 操作 Tom $3500 2010-12-25 删除 Mary $3400 2010-12-01 删除 King $5900 2009-8-17 删除 Scott $3800 2012-11-17 删除
JQuery来控制表格奇偶行的不同背景颜色显示
lishirong_李世荣的专栏
12-02 3309
概述：JQuery通过操作DOM来控制页面的显示。来看代码：       jQuery使不同行变不同的颜色    -->     .odd{background-color:#FFCCFF;} .even{ background-color:#CCFFFF;} .highlight{background-color:00FF00;}        $(document).ready(functi
jQuery 实现table隔行变色
super的博客
07-27 1533
使用jQuery 的集合处理能力简洁的实现table表格的隔行变色功能。
jquery css 设置table的奇偶行背景色
人生若南柯一梦
12-05 2541
.even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF9900;} $(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); });
jquery实现奇偶行赋值不同css值
10-28
通常为了让页面呈现的更为美观，我们喜欢在奇偶行加上不同的颜色
jQuery实现表格奇偶行显示不同背景色 就这么简单
10-20
主要为大家详细介绍了jQuery实现表格奇偶行显示不同背景色的方法，使表格更加美观，便捷的查找同行数据更，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何用jquery控制表格奇偶行及活动行颜色
10-26
主要介绍了如何用jquery控制表格奇偶行及活动行颜色,需要的朋友可以参考下
jQuery:表格的奇偶行变色
我想我是海 冬天的大海 心情随风轻摆
09-02 1862
表格变色 .odd{background:#ffffee;} .even{background:#fff38f;} .first{background:red;} .last{background:blue;} .mouseOver{background:green;}
使用vue渲染表格隔行变色
小鹿不在林间的博客
02-23 5285
使用vue框架，渲染一个表格。 要求： 1.表格隔行变色。 2 并能够通过下拉菜单选择颜色
table隔行变色的css
zunguitiancheng的专栏
06-29 1943
https://blog.csdn.net/semizhou/article/details/19902077&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="GBK" /&gt;&lt;title&gt;Css3实现表格隔行变色或隔列变色&lt;/title&gt;&lt;style&gt; .tab
jQuery实现表格隔行换颜色：
迷彩风情
01-28 97
jQuery实现表格各行换颜色： 截图如下： 代码如下： &lt;span style="font-family:Microsoft YaHei;font-size:14px;"&gt;&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = re
隔行变色
lx258963的专栏
04-21 62
[code="javascript"] 表格变色 流程 启动人 启动时间 状态 测试行 无 2008-05-09 17:21:04 结束 测试行 ...
jquery 获取tr里的值_jquery遍历table的tr获取td的值实现方法
weixin_31992237的博客
01-27 1532
下面小编就为大家带来一篇jquery遍历table的tr获取td的值实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧html代码：删除删除删除方法一：var trList = $("#history_income_list").children("tr")for (var i=0;ivar tdArr = trList.eq(i).find("td");var ...
jquery两行轮播
最新发布
11-18
以下是使用jQuery实现的两行轮播的示例代码： ```html ``` ```javascript $(document).ready(function(){ $('.carousel').carousel({ interval: 2000 // 设置轮播间隔时间...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值