匹配所有索引值為奇數(shù)的元素，從0開始計數(shù)$( :even ) --> 匹配..."/>

<tt id="aj1sj"><strong id="aj1sj"></strong></tt>

<nav id="aj1sj"></nav>

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗證碼

其他方式登錄

點擊登錄注冊即表示同意《億速云用戶服務(wù)條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點擊重新獲取二維碼

jQuery 表格應(yīng)用：隔行變色，展開關(guān)閉，內(nèi)容篩選

發(fā)布時間：2020-04-24 03:23:33 來源：網(wǎng)絡(luò) 閱讀：1482 作者：frwupeng517 欄目：web開發(fā)

應(yīng)用一：表格隔行變色

1、普通的隔行變色：

需要用到的 API

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

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

<!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>產(chǎn)品名稱</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>格力空調(diào)</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');
        //某一行變?yōu)楦吡溜@示狀態(tài)
        $('tr:contains("下單")').addClass('selected')
    })
</script>
</body>
</html>

頁面效果：

jQuery 表格應(yīng)用：隔行變色，展開關(guān)閉，內(nèi)容篩選

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

需要用到的API

end( ) --> 回到最近的一個“破壞性”操作之前，即，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)

:checked --> 匹配所有選中的被選中元素（復(fù)選框、單選按鈕等，不包括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>產(chǎn)品名稱</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>格力空調(diào)</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()  //點到一行的同時讓對應(yīng)的單選框選中
                    .siblings().find(':radio').attr('checked',false);  //其他行的單選框取消選中
        });

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

頁面效果：

jQuery 表格應(yīng)用：隔行變色，展開關(guān)閉，內(nèi)容篩選

3、復(fù)選框控制表格高亮

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

<!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>產(chǎn)品名稱</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>格力空調(diào)</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(){
            //判斷當(dāng)前是否選中 -> boolean
            var hasSelected = $(this).hasClass('selected');
            //如果選中，則移除 selected 類，否則就加上 selected。使用三目運算
            $(this)[hasSelected?'removeClass':'addClass']('selected')
                    //查找當(dāng)前行內(nèi)的 checkbox 屬性，選中則去掉，未勾選則選中
                    .find(':checked').attr('checked',!hasSelected);
        });

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

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

效果：

jQuery 表格應(yīng)用：隔行變色，展開關(guān)閉，內(nèi)容篩選

應(yīng)用二：表格展開/關(guān)閉

需要用到的API

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

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

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

<!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>產(chǎn)品名稱</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>格力空調(diào)</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>九陽豆?jié){機</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>

效果：

jQuery 表格應(yīng)用：隔行變色，展開關(guān)閉，內(nèi)容篩選

應(yīng)用三：表格內(nèi)容篩選

需要用到的API

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

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

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

show([speed,[easing],[fn]]) --> 顯示隱藏的匹配元素，無論這個元素是通過 hide( ) 方法隱藏的還是在 CSS里設(shè)置了 display: none, 這個方法都有效

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

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

<!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>產(chǎn)品名稱</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>格力空調(diào)</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內(nèi)部的空格和字符串的拼接
                .show();
    }).keyup();
</script>
</body>
</html>

效果：

jQuery 表格應(yīng)用：隔行變色，展開關(guān)閉，內(nèi)容篩選

向AI問一下細節(jié)

推薦閱讀：

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

上一篇新聞：
隱式游標(biāo)返回結(jié)果
下一篇新聞：
Kubernetes安全三步談：三種方法保護Kubernetes免受內(nèi)部威脅

猜你喜歡

AI
助
手

產(chǎn)品服務(wù)

地區(qū)劃分

專題活動

幫助支持

關(guān)于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關(guān)注億速云

億速云公眾號

手機網(wǎng)站二維碼

<var id="uzh1o"></var>

<menu id="uzh1o"></menu>

<var id="uzh1o"></var>