jQuery 表格應用：隔行變色，展開關閉，內容篩選

時間  2020-07-08
標籤 jquery 表格 應用 隔行 變色 展開 關閉 內容 篩選 欄目 JQuery 简体版
原文   原文鏈接

應用一：表格隔行變色
html


一、普通的隔行變色：jquery


須要用到的 APIide

$(':odd')    --> 匹配全部索引值爲奇數的元素，從0開始計數
this

$(':even')   --> 匹配全部索引值爲偶數的元素，從0開始計數spa


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }

        .even{background:#fff38f;}
        .odd{background:#ffe;}
        .selected{background:#ae0;}
    </style>
</head>
<body>
<div>
    篩選：<input type="text" id="#filterName">
</div>
<table>
    <thead>
    <tr>
        <th>下單時間</th>
        <th>產品名稱</th>
        <th>訂單金額</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>2013-04-26</td>
        <td>海爾電冰箱</td>
        <td>3688</td>
    </tr>
    <tr>
        <td>2014-11-11</td>
        <td>格力空調</td>
        <td>5689</td>
    </tr>
    <tr>
        <td>2015-01-14</td>
        <td>美的電飯煲</td>
        <td>452</td>
    </tr>
    <tr>
        <td>2016-08-26</td>
        <td>小米淨化器</td>
        <td>2258</td>
    </tr>
    <tr>
        <td>2016-12-12</td>
        <td>蘋果6 plus</td>
        <td>5688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        //隔行變色
        $('tbody>tr:odd').addClass('odd');
        $('tbody>tr:even').addClass('even');
        //某一行變爲高亮顯示狀態
        $('tr:contains("下單")').addClass('selected')
    })
</script>
</body>
</html>


頁面效果：插件

wKiom1hHwI-gybUoAAATwSWqsQ8568.png

二、單選按鈕控制表格行高亮orm


須要用到的APIhtm

end( )        --> 回到最近的一個「破壞性」操做以前，即，將匹配的元素列表變爲前一次的狀態blog

:checked   --> 匹配全部選中的被選中元素（複選框、單選按鈕等，不包括select 中的option）索引

$( ':radio' )         --> 匹配全部單選按鈕

:has( selector )   --> 用於篩選選擇器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }

        .even{background:#fff38f;}
        .odd{background:#ffe;}
        .selected{background:#ae0;}
    </style>
</head>
<body>
<div>
    篩選：<input type="text" id="#filterName">
</div>
<table>
    <thead>
    <tr>
        <th></th>
        <th>下單時間</th>
        <th>產品名稱</th>
        <th>訂單金額</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="radio" checked></td>
        <td>2013-04-26</td>
        <td>海爾電冰箱</td>
        <td>3688</td>
    </tr>
    <tr>
        <td><input type="radio"></td>
        <td>2014-11-11</td>
        <td>格力空調</td>
        <td>5689</td>
    </tr>
    <tr>
        <td><input type="radio"></td>
        <td>2015-01-14</td>
        <td>美的電飯煲</td>
        <td>452</td>
    </tr>
    <tr>
        <td><input type="radio"></td>
        <td>2016-08-26</td>
        <td>小米淨化器</td>
        <td>2258</td>
    </tr>
    <tr>
        <td><input type="radio"></td>
        <td>2016-12-12</td>
        <td>蘋果6 plus</td>
        <td>5688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        //點擊行變色
        $('tbody>tr').click(function(){
            $(this).addClass('selected').siblings('.selected').removeClass('selected').end() //切換點擊變色
                    .find(':radio').attr('checked',true).end()  //點到一行的同時讓對應的單選框選中
                    .siblings().find(':radio').attr('checked',false);  //其餘行的單選框取消選中
        });

        //默認選中的行變色
        $('tbody>tr:has(:checked)').addClass('selected');
    })
</script>
</body>
</html>


頁面效果：

wKioL1hHyLiw_pOYAAcwkch12yk694.gif



三、複選框控制表格高亮


重點注意：三目運算在選擇器中的用法


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }

        .even{background:#fff38f;}
        .odd{background:#ffe;}
        .selected{background:#ae0;}
    </style>
</head>
<body>
<div>
    篩選：<input type="text" id="#filterName">
</div>
<table>
    <thead>
    <tr>
        <th></th>
        <th>下單時間</th>
        <th>產品名稱</th>
        <th>訂單金額</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" checked></td>
        <td>2013-04-26</td>
        <td>海爾電冰箱</td>
        <td>3688</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2014-11-11</td>
        <td>格力空調</td>
        <td>5689</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2015-01-14</td>
        <td>美的電飯煲</td>
        <td>452</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2016-08-26</td>
        <td>小米淨化器</td>
        <td>2258</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2016-12-12</td>
        <td>蘋果6 plus</td>
        <td>5688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        //點擊行變色
        $('tbody>tr').click(function(){
            //判斷當前是否選中 -> boolean
            var hasSelected = $(this).hasClass('selected');
            //若是選中，則移除 selected 類，不然就加上 selected。使用三目運算
            $(this)[hasSelected?'removeClass':'addClass']('selected')
                    //查找當前行內的 checkbox 屬性，選中則去掉，未勾選則選中
                    .find(':checked').attr('checked',!hasSelected);
        });

        //默認選中的行變色
        $('tbody>tr:has(:checked)').addClass('selected');

    })
</script>
</body>
</html>


效果：

wKioL1hHzpaAXyw_AAzwwR4p3lU498.gif



應用二：表格展開/關閉


須要用到的API

toggleClass( )       --> 若是存在，就刪除一個類；若是不存在，就添加一個類


toggle([speed],[easing],[fn])   --> 若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。

1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件能夠恢復此功能。


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }

        .even{background:#fff38f;}
        .odd{background:#ffe;}
        .selected{background:#ae0;}
    </style>
</head>
<body>
<div>
    篩選：<input type="text" id="#filterName">
</div>
<table>
    <thead>
    <tr>
        <th>下單時間</th>
        <th>產品名稱</th>
        <th>訂單金額</th>
    </tr>
    </thead>
    <tbody>
    <tr class="parent" id="row_01"><td colspan="3">你們電系列</td></tr>
    <tr class="child_row_01">
        <td>2013-04-26</td>
        <td>海爾電冰箱</td>
        <td>3688</td>
    </tr>
    <tr class="child_row_01">
        <td>2014-11-11</td>
        <td>格力空調</td>
        <td>5689</td>
    </tr>
    <tr class="child_row_01">
        <td>2015-01-14</td>
        <td>美的電飯煲</td>
        <td>452</td>
    </tr>
    <tr class="parent" id="row_02"><td colspan="3">小家電系列</td></tr>
    <tr class="child_row_02">
        <td>2016-08-26</td>
        <td>小米淨化器</td>
        <td>2258</td>
    </tr>
    <tr class="child_row_02">
        <td>2016-06-26</td>
        <td>九陽豆漿機</td>
        <td>258</td>
    </tr>
    <tr class="parent" id="row_03"><td colspan="3">手機系列</td></tr>
    <tr class="child_row_03">
        <td>2016-12-12</td>
        <td>蘋果6 plus</td>
        <td>5688</td>
    </tr>
    <tr class="child_row_03">
        <td>2016-12-30</td>
        <td>蘋果7 plus</td>
        <td>7688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $('tr.parent').click(function(){  //獲取父行
            $(this).toggleClass('selected')  //添加/刪除高亮
                    .siblings('.child_'+this.id).toggle();  //顯示/隱藏子行
        })

    })
</script>
</body>
</html>


效果：

wKioL1hH0tnBHKcBAAhaf1YJs9Q309.gif



應用三：表格內容篩選


須要用到的API

:contains( text )       --> 匹配包含給定文本的元素

$.trim(str)                 --> 去掉字符串起始和結尾的空格

filter(expr|obj|ele|fn)    --> 篩選出與指定表達式匹配的元素集合

show([speed,[easing],[fn]])    --> 顯示隱藏的匹配元素，不管這個元素是經過 hide( ) 方法隱藏的仍是在 CSS裏設置了 display: none, 這個方法都有效

hide([speed,[easing],[fn]])     --> 隱藏顯示的匹配元素

keyup([[data],fn])     --> 當按鈕被鬆開時，發生 keyup 事件。它發生在當前得到焦點的元素上


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }
    </style>
</head>
<body>
<div>
    篩選：<input type="text" id="filterName">
</div>
<table>
    <thead>
    <tr>
        <th>下單時間</th>
        <th>產品名稱</th>
        <th>訂單金額</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>2013-04-26</td>
        <td>海爾電冰箱</td>
        <td>3688</td>
    </tr>
    <tr>
        <td>2014-11-11</td>
        <td>格力空調</td>
        <td>5689</td>
    </tr>
    <tr>
        <td>2015-01-14</td>
        <td>美的電飯煲</td>
        <td>452</td>
    </tr>
    <tr>
        <td>2016-08-26</td>
        <td>小米淨化器</td>
        <td>2258</td>
    </tr>
    <tr>
        <td>2016-12-12</td>
        <td>蘋果6 plus</td>
        <td>5688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $("#filterName").keyup(function(){
        $("table tbody tr")
                .hide()
                .filter(":contains('"+( $(this).val().trim() )+"')") //注意contains內部的空格和字符串的拼接
                .show();
    }).keyup();
</script>
</body>
</html>


效果：

wKiom1hIxu_zUGdGAAhJfsk1LVY598.gif

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程