从多个字段输入合并搜索结果

我问了一个关于实时搜索表的问题，但我有多个字段，如文本和选择下拉字段。 我根据上一个问题得到的答案写了一个js代码：

$("#deviceName").keyup(function(){ var deviceNameFilter = $(this).val(); $("#device-list_table tbody tr").each(function(){ if ($(this).text().search(new RegExp(deviceNameFilter, "i")) < 0) { $(this).hide(); } else { $(this).show(); } }); }); $("#broadcastProg").change(function(){ var broadcastProgFilter = $("#broadcastProg option:selected").text(); $("#device-list_table tbody tr").each(function(){ if ($(this).text().search(new RegExp(broadcastProgFilter, "i")) < 0) { $(this).hide(); } else { $(this).show(); } }); }); $("#store").change(function(){ var storeFilter = $("#store option:selected").text(); $("#device-list_table tbody tr").each(function(){ if ($(this).text().search(new RegExp(storeFilter, "i")) < 0) { $(this).hide(); } else { $(this).show(); } }); }); $("#deviceModel").change(function(){ var deviceModelFilter = $("#deviceModel option:selected").text(); $("#device-list_table tbody tr").each(function(){ if ($(this).text().search(new RegExp(deviceModelFilter, "i")) < 0) { $(this).hide(); } else { $(this).show(); } }); }); $("#deviceStatus").change(function(){ var deviceStatusFilter = $("#deviceStatus option:selected").text(); $("#device-list_table tbody tr").each(function(){ if ($(this).text().search(new RegExp(deviceStatusFilter, "i")) < 0) { $(this).hide(); } else { $(this).show(); } }); }); $("#logOutputLog").keyup(function(){ var logOutputLogFilter = $(this).val(); $("#device-list_table tbody tr").each(function(){ if ($(this).text().search(new RegExp(logOutputLogFilter, "i")) < 0) { $(this).hide(); } else { $(this).show(); } }); }); 

例如，我在deviceName字段上输入关键字，表格会更新并显示结果，但是当我从broadcastProg下拉字段中选择一个选项时，它还会显示结果，但仅显示所选选项的结果，而不考虑deviceName字段的结果。 所以应该是这样，比如当我在deviceName文本字段中输入“iPhone”并在broadcastProg下拉字段中选择“Schedule 1”时，表格应该在“设备名称”列下显示“iPhone”行，并在“下一步”下显示“Schedule 1”广播计划专栏。 我如何合并结果呢？

此外， deviceName字段应仅搜索“设备名称”列，不包括其他列。 就我而言，它会搜索所有列。

希望有人可以帮忙。

Answer 1

考虑你的deviceName字段是第一列，然后你可以这样写，只在这个列中搜索

 $(document).ready(function(){ $("#deviceName").keyup(function(){ var deviceNameFilter = $(this).val(); $("#device-list_table td:first-child ").each(function(){ if ($(this).text().search(new RegExp(deviceNameFilter, "i")) < 0) { $(this).parent().hide(); }else { $(this).parent().show(); } }); }); 

你的broadcastProg在第二列然后你可以给td:nth-child(2)而不是td:first-child

对于合并，你需要实现一些逻辑...例如：你在else部分显示元素对吗？ 在那里你可以给出这样的if条件

 if( $("#broadcastProg option:selected").text()== ""){ $(this).parent().show(); }