• jquery奇偶行不同底色显示


    jquery奇偶行不同底色显示

    <!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>

  • 相关阅读:
    poj 1456 贪心+STL
    hdu 4283 区间dp
    hdu 4745 区间dp
    hdu 3652 数位dp
    poj 2955 区间dp
    ubuntu apache2配置详解(含虚拟主机配置方法)
    从 mysql 客户端导出数据库 mysqldump
    Git 版本回退问题详解
    SEO 外链 内链 的定义
    为项目编写Readme.MD文件
  • 原文地址:https://www.cnblogs.com/honoir/p/3147656.html
Copyright © 2020-2023  润新知