Question

我正在尝试使用一个简单的Jquery过滤器，即表搜索。

问题：当您使用input [text]时，JQuery会过滤行，但这很好用，但是如果您键入日期，则会丢失主要和额外信息行，反之亦然。

我想不出另一种方法或（最好是）对所有相关行进行分组的方法，或者.show（）这些行。

JSFiddle（https://jsfiddle.net/fidlr/zoLbx1dv/）

代码： jQuery

$("#searchbox").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#layout tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
  });
});

HTML

 <input type="text" id="searchbox">
<table id="layout">
  <tr>
    <td colspan="3">Date a</td>
  </tr> 
  <tr>
    <td>time<br>location a</td>
    <td>main info a</td>
    <td>sponsor a</td>
    </tr>
  <tr>
    <td colspan="3">extra info a</td>
  </tr>
  <tr>
    <td colspan="3">Date b</td>
  </tr> 
  <tr>
    <td>time<br>location b</td>
    <td>main infob </td>
    <td>sponsor b</td>
  </tr>
  <tr>
    <td colspan="3">extra info b</td>
  </tr> 
  <tr>
    <td>time<br>location b2</td>
    <td>main info b2</td>
    <td>sponsor b2</td>
  </tr>
  <tr>
    <td colspan="3">extra info b2</td>
  </tr>
</table>

更多信息：这些行是使用php动态生成的；我试过按类对行进行分组。

编辑

理想的搜索结果示例： 搜索[主要信息a]还将保留[日期a]和[其他信息a] 搜索[主要信息b2]还将保留[日期b]和[其他信息b2] 搜索

使用HTML JQuery分组和过滤/搜索表

0 个答案: