快捷導(dǎo)航

jquery通過(guò)select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過(guò)濾示例

更新時(shí)間：2014年05月07日 11:49:59 作者：

這篇文章主要介紹了jquery通過(guò)select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過(guò)濾示例,需要的朋友可以參考下

jquery通過(guò)select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過(guò)濾

表格數(shù)據(jù)

<table id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Michael</td>
            <td>Jordan</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td>Jackson</td>
        </tr>
        <tr>
            <td>Bruno</td>
            <td>Mars</td>
        </tr>
    </tbody>
</table>

JS過(guò)濾代碼，其中select是動(dòng)態(tài)生成的

復(fù)制代碼代碼如下:

 $("#example > thead th").each(function(i) {
    $("<select />").attr("data-index", i).html($("<option />")).change(function() {
        $("#example > tbody > tr").show().filter(function() {
            var comb = [], children = $(this).children();
            children.each(function(i) {
                var value = $("select[data-index='" + i + "']").val();
                if (value == $(this).text() || value == "") comb.push(1);
            });
            return comb.length != children.length;
        }).hide();
    }).appendTo("body");
});
$("#example > tbody tr").each(function() {
    $(this).children().each(function(i) {
        var that = $(this);
        var select = $("select[data-index='" + i + "']");
        if (!select.children().filter(function() {
            return $(this).text() == that.text();
        }).length) {
            select.append($("<option />").text($(this).text()));
        }
    });
});
 

您可能感興趣的文章:

相關(guān)文章

基于jquery的合并table相同單元格的插件(精簡(jiǎn)版)
正好項(xiàng)目中有個(gè)小需求, 要求把表格指定列中內(nèi)容相同的單元格進(jìn)行合并,本質(zhì)上涉及的就是td的rowspan屬性, 數(shù)出含相同內(nèi)容單元格的個(gè)數(shù), 然后給第一個(gè)與上一行內(nèi)容不同的td其rowspan屬性附上正確的值即可, 為了能直觀的理解
2011-04-04
jQuery ui autocomplete選擇列表被Bootstrap模態(tài)窗遮擋的完美解決方法
這篇文章主要介紹了jQuery ui autocomplete選擇列表被Bootstrap模態(tài)窗遮擋的完美解決方法,本文介紹的非常詳細(xì)，解決過(guò)程思路明了，需要的朋友可以參考下
2016-09-09
基于jquery的獲取mouse坐標(biāo)插件的實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)的獲取mouse坐標(biāo)的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-04-04
jQuery實(shí)現(xiàn)大圖輪播
本文主要分享了jQuery實(shí)現(xiàn)大圖輪播的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
jQuery1.9+中刪除了live以后的替代方法
這篇文章主要介紹了jQuery1.9+中刪除了live以后的替代方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
jQuery前端分頁(yè)示例分享
這篇文章主要介紹了jQuery前端分頁(yè)示例分享的相關(guān)資料,需要的朋友可以參考下
2015-02-02
圖片在瀏覽器中底部對(duì)齊解決方法之一
需要在列表中顯示很多圖片，圖片高低不同，寬度都設(shè)置一樣了，要底部對(duì)齊
2011-11-11
基于jquery的模態(tài)div層彈出效果
由于項(xiàng)目原因，需要實(shí)現(xiàn) 點(diǎn)擊按鈕后，顯示友好的 loading 信息，并且為模態(tài)的。
2010-08-08
jQuery的學(xué)習(xí)步驟
首先我建議大家去看看<JQUERY實(shí)戰(zhàn)>這本書，稍后我會(huì)提供本書的jquery實(shí)戰(zhàn)PDF版本。能省點(diǎn)銀子最好啊。
2011-02-02
JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法
這篇文章主要介紹了JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法,涉及jQuery中index方法的使用技巧,需要的朋友可以參考下
2015-05-05