Question

我有一个过滤表的功能，具体取决于您在下拉列表中选择的内容。但是现在它过滤了整排。我需要每个下拉列表来过滤特定的列。

我尝试为每个filter调用option:selected函数，但这不起作用。我不知道如何使用我已有的功能来解决这个问题。

这里是DEMO。我需要第一个下拉列表来过滤第一列，第二个下拉列表来过滤第三列如果您选择wood和green，则只应显示第一列中wood和第三列中green的行。

$(document).ready(function () {

    $('.filter').change(function () {
        var values = [];
        $('.filter option:selected').each(function () {
            if ($(this).val() != "") values.push($(this).text());
        });
        filter('table > tbody > tr', values);
    });

    function filter(selector, values) {
        $(selector).each(function () {
            var sel = $(this);
            var hide = false;
            $.each(values, function (i, val) {
                if (sel.text().search(new RegExp("\\b"+val+"\\b")) < 0) hide = true;
            });
            hide ? sel.hide() : sel.show();
        });
    }
});

HTML

<select class="filter">
    <option value="">None</option>
    <option value="a">wood</option>
</select>
<select class="filter">
    <option value="">None</option>
    <option value="1">blue</option>
    <option value="2">green</option>
    <option value="3">red</option>
</select>
<table>
    <tbody>
        <tr>
            <td>Wood comes from trees</td>
            <td>11</td>
            <td>blue</td>
        </tr>
        <tr>
            <td>Some wood is hard</td>
            <td>512</td>
            <td>green</td>
        </tr>
        <tr>
            <td>Some people like woodwork</td>
            <td>51</td>
            <td>red</td>
        </tr>
        <tr>
            <td>Some wood is green</td>
            <td>12</td>
            <td>blue</td>
        </tr>
    </tbody>
</table>

Answer 1

我对您的示例进行了一些更改，它似乎正常工作see fiddle（新版本），

我更改了filter方法，现在方法正在检查找到该单词的次数，希望这有帮助

HTML 我为保留列索引的select元素添加了data-col个属性

<select class="filter" data-col="0">
    <option value="">None</option>
    <option value="a">wood</option>
</select>
<select class="filter" data-col="2">
    <option value="">None</option>
    <option value="1">blue</option>
    <option value="2">green</option>
    <option value="2">red</option>
</select>

新的js代码

$(document).ready(function () {

$('.filter').change(function () {
    var values = [];

     $('.filter').each(function () {
        var colIdx = $(this).data('col');

         $(this).find('option:selected').each(function () {
             if ($(this).val() != "") values.push( {
                text: $(this).text(),
                colId : colIdx
             });
        });
    });
    filter('table > tbody > tr', values);
});

function filter(selector, values) {console.log(values);
    $(selector).each(function () {
        var sel = $(this);
        var tokens = sel.text().trim().split('\n');
        var toknesObj = [], i;
        for(i=0;i<tokens.length;i++){
            toknesObj[i] = {
               text:tokens[i].trim(), 
               found:false
            };
        }

        var show = false;
        //console.log(toknesObj);
        $.each(values, function (i, val) {                

       if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
           toknesObj[val.colId].found = true;
          }

        });          
        console.log(toknesObj);
        var count = 0;
         $.each(toknesObj, function (i, val) {
             if (val.found){
                 count+=1;
             }
         });
        show = (count === values.length);        
        show ? sel.show() : sel.hide();
    });
}
});

下拉列表以过滤特定列上的行

1 个答案: