使用jQuery筛选具有多个选择的表

我有一个具有多个列的表，我想使用多个选择对其进行筛选。每个选择对应于一个特定的列。当select更改时，表将仅显示与select对应的列具有相同值的行

我已经开始了一个小插曲。任何想法都会有帮助

到目前为止我所做的：

var filter = $('select');

filter.change(function() {
    var table = $('table');
    var rows = $('tr');
    var filterValue = $(this).val();
});

---

根据我的理解，您试图突出显示与所选选项相同的td

var filter = $('select');
filter.change(function () {
    var table = $('table');
    var rows = $('tr');
    var filterValue = $(this).val();
    $('tr td').css('color', 'black')
    $('tr td').each(function () {
        if (filterValue == $(this).text()) {  // I have testing for the matches
            $(this).css('color', 'red')
        }
    });
});

这里是您必须知道的关键点，即使用

.each（）迭代
td
s

这是一个

希望你能理解

更新：
1） 获取正在单击的选择的标签名称

var col = $(this).parent().find('label').text();

2） 在这里，我使用下面的行获取列号

var colNumber = col.replace("Column ", "")

这将返回所选select的列号

var filter = $('select');
filter.change(function () {
    var table = $('table');
    var rows = $('tr');
    var filterValue = $(this).val();
    $('tr td').css('color', 'black')
    $('tr td').each(function () {
        if (filterValue == $(this).text()) {  // I have testing for the matches
            $(this).css('color', 'red')
        }
    });
});

3） 借助于此，我找到了一种迭代列的方法

现在你了解了更多的深度

$("table tr td:nth-child(" + colNumber + ")").each(function () {
        if (filterValue == $(this).text()) {
            $(this).css('color', 'red');
        }
    });

对于您的第一条评论，只需触发如下事件

$('select').change();

jsiddle链接不起作用。一个片段会有所帮助

如果要对行中的每个可用td使用筛选器，可以使用以下脚本：


（功能（文档）{
"严格使用",；
var LightTableFilter=（函数（Arr）{
var_输入；
函数_onInputEvent（e）{
_输入=e.目标；
var tables=document.getElementsByClassName（_input.getAttribute（'data-table'）；
Arr.forEach.call（表，函数（表）{
Arr.forEach.call（table.tBodies，function（tbody））{
Arr.forEach.call（tbody.rows，_filter）；
});
});
}
函数_过滤器（行）{
var text=row.textContent.toLowerCase（），val=_input.value.toLowerCase（）；
row.style.display=text.indexOf（val）=-1？'none'：'table row'；
}
返回{
init:function（）{
var inputs=document.getElementsByClassName（'light-table-filter'）；
Arr.forEach.call（输入，函数（输入）{
input.oninput=\u onInputEvent；
});
}
};
})（阵列.原型）；
document.addEventListener（'readystatechange'，function（）{
如果（document.readyState==='complete'）{
LightTableFilter.init（）；
}
});
})（文件）

第1栏
第2栏
二号
二号
第一栏
两个
352353
1.
第二栏
两个
4646
2.
谢谢，你帮了很多忙。还有一件事，所有的过滤器应该一起工作。例如，更改第1列和第2列的筛选器，因此仅显示两个筛选器都正常的行。你知道我该怎么处理吗？另外，每个过滤器对应一个特定的列，所以过滤列1不应该过滤列2相同的内容。@ClaudiusIbn这在我看来更有趣；）@ClaudiusIbn我已经更新了我的答案，请仔细检查。我很乐意回答。再次谢谢你。没有爱，就没有办法回答。：）差不多了，但我想我没有解释正确，因为过滤器应该工作。只有所有COLLMN匹配所有筛选器的行才应着色。