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

Question

我有一个函数可以根据您在下拉列表中选择的内容来过滤表格。但现在它过滤了一整行。我需要每个下拉列表来过滤特定的列。

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

这是一个 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 (新版本),

我更改了过滤方法，现在方法正在检查单词被找到的次数，希望这对您有所帮助

HTML 我为选择元素添加了 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();
    });
}
});