Javascript 带有搜索输入的JQuery筛选表
我有两个下拉列表来过滤一个表。这些工作正常。它们根据选择显示/隐藏行。我还想添加一个搜索来进一步过滤行,但我无法让它工作 比如说 搜索需要考虑下拉选择。因此,如果dropdown 1='Three'和dropdown 2='Four'(例如),则返回5行。如果我开始在“右”搜索框中键入,则应显示两行。当我退出搜索时,5行应该会重新出现(下拉过滤器完好无损) 代码笔: 这是JQueryJavascript 带有搜索输入的JQuery筛选表,javascript,jquery,html,filtering,Javascript,Jquery,Html,Filtering,我有两个下拉列表来过滤一个表。这些工作正常。它们根据选择显示/隐藏行。我还想添加一个搜索来进一步过滤行,但我无法让它工作 比如说 搜索需要考虑下拉选择。因此,如果dropdown 1='Three'和dropdown 2='Four'(例如),则返回5行。如果我开始在“右”搜索框中键入,则应显示两行。当我退出搜索时,5行应该会重新出现(下拉过滤器完好无损) 代码笔: 这是JQuery $(function() { $('#archive, #type').change(function()
$(function() {
$('#archive, #type').change(function() {
filterTable($('#archive').val(), $('#type').val());
});
});
function filterTable(archive, entry) {
var $rows = $('#filter tbody tr').show();
if (archive == "one") {
$rows.filter(":has(td:nth-child(4):contains('Two'))").hide()
$rows.filter(":has(td:nth-child(4):contains('Three'))").hide()
} else if (archive == "two") {
$rows.filter(":has(td:nth-child(4):contains('One'))").hide()
$rows.filter(":has(td:nth-child(4):contains('Three'))").hide()
} else if (archive == "three") {
$rows.filter(":has(td:nth-child(4):contains('One'))").hide()
$rows.filter(":has(td:nth-child(4):contains('Two'))").hide()
}
if (entry == "one") {
$rows.filter(":has(td:nth-child(6):contains('N'))").hide()
$rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(8):contains('Y'))").hide()
} else if (entry == "two") {
$rows.filter(":has(td:nth-child(6):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(8):contains('N'))").hide()
} else if (entry == "three") {
$rows.filter(":has(td:nth-child(6):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(7):contains('N'))").hide()
$rows.filter(":has(td:nth-child(8):contains('Y'))").hide()
} else if (entry == "four") {
$rows.filter(":has(td:nth-child(6):contains('N'))").hide()
$rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(8):contains('N'))").hide()
}
}
// SEARCH INPUT
$("#search").on("keyup", function() {
var value = $(this).val();
$("table tbody tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});