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

原創 frwupeng517 2018-09-11 02:16

應用一：表格隔行變色


1、普通的隔行變色：


需要用到的 API

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

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


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

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


需要用到的API

end( )        --> 回到最近的一個“破壞性”操作之前，即，將匹配的元素列表變爲前一次的狀態

: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



3、複選框控制表格高亮


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


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


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

《空門》

王清甫 2019-02-24 13:32:45

《霧》

王清甫 2019-02-24 13:32:45

grep，sed，awk

曉晶 2019-02-23 13:58:27

linux命令學習記錄一

ssjywlb 2019-02-23 13:58:00

>>>>2007年IT業回顧之哀兵糗事篇：華爲帶頭鑽法律空子<轉>

ahgyyubo 2019-02-23 13:56:41

CCNA實驗二：手動建立靜態路由表

蝸牛001號 2019-02-23 13:53:33

C#實現的18位身份證格式驗證算法

sccdliangl 2019-02-23 13:53:12

安裝mvwareworstation

zhumingqiang 2019-02-23 13:52:48

ShareTech 防火牆 使用手冊(適用型號：LB-2225)

yzy747 2019-02-23 13:50:59

科技部網站是這樣回答無聊問題的....

張富貴 2019-02-23 13:49:41

zabbix3.0安裝

民工騎士 2019-02-23 13:46:35

PHP+jQuery實現即點即改功能示例

ztblog 2019-02-24 12:43:05

PHP+jQuery實現雙擊修改table表格功能示例

ztblog 2019-02-24 12:43:05

第二十二章：動畫（四）

wangccsy 2019-02-24 10:57:10

json

yi_sixian 2019-02-23 14:02:01