jquery - 如何通过td内容过滤多个表

Question

期望的行为

根据所有表格前两列中的搜索匹配显示或隐藏表格(整个表格，而不是表格单元格) - 如果第一列或第二列中有匹配项 <td>的<tr> ，显示表格，否则隐藏表格。

我尝试过的

jsFiddle

$("input").on("keyup", function() {
  var matcher = new RegExp($(this).val(), "gi");
  $(".my_table")
    .hide()
    .filter(function() {
      return matcher.test($(this).find("td").text());
    })
    .show();
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text">

<table class="my_table">
  <thead>
    <tr>
      <th>
        First Name
      </th>
      <th>Last Name</th>
      <th>Text</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Johnman</td>
      <td>Here is some text</td>
    </tr>
    <tr>
      <td>Felix</td>
      <td>Mann</td>
      <td>Cake</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>Pan</td>
      <td>Green green grass of home</td>
    </tr>
</table>

<br><br>

<table class="my_table">
  <thead>
    <tr>
      <th>
        First Name
      </th>
      <th>Last Name</th>
      <th>Text</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Stone</td>
      <td>Here is text</td>
    </tr>
    <tr>
      <td>Trevor</td>
      <td>Barry</td>
      <td>Cake</td>
    </tr>
    <tr>
      <td>Xylophone</td>
      <td>Greet</td>
      <td>Green green grass of home</td>
    </tr>
</table>

如果有助于定位搜索，不反对将类放在每行的前两个表格单元格上，只是不完全确定如何定位正在过滤的表格实例。

最终我想在输入 3 个字符后开始过滤，因此可能会将代码包装在对输入长度的条件检查中，并在输入长度为 0 时(在退格内容后)显示所有表格。

Answer 1

只是发布一个我最终开发的解决方案，即使它与接受的答案不同(因为它朝不同的方向发展)，以防它可以帮助其他人采用另一种方法。它并不精简或优化，但这可能有助于其他人看到逻辑的不同“部分”。

它根据搜索输入(至少 3 个字符)过滤表格并突出显示匹配的文本。它只匹配前两个 <td> 中的内容每个 <tr> - 在第一个单元格中，它匹配内容的开头，在第二个单元格中，它匹配内容中的任何位置。

function search_tds(input_val) {
  $("table").each(function() {
    var match_counter = 0;

    // instance of table
    var $this = $(this);
    // first and second cells in each row
    var $tds = $this.find("td:nth-child(1),td:nth-child(2)");

    $tds.each(function(ind, val) {
      var cell = $tds[ind];
      var cell_text = cell.innerText;

      // if the first cell, perform check at start of string
      if ($(this).is(":nth-child(1)")) {
        var is_at_start_of_string =
          cell_text.toLowerCase().indexOf(input_val.toLowerCase()) === 0;
        // remove span tags to remove 'history' state
        // ie if there was existing match and then pasted in
        // another matching value
        if (is_at_start_of_string === false) {
          cell.innerHTML = cell.innerText;
        }
      } else if ($(this).is(":nth-child(2)")) {
        // if the second cell, perform check anywhere in string
        var exists_in_string =
          cell_text.toLowerCase().indexOf(input_val.toLowerCase()) !== -1;
        // remove span tags to remove 'history' state
        // ie if there was existing match and then pasted in
        // another matching value
        if (exists_in_string === false) {
          cell.innerHTML = cell.innerText;
        }
      }

      if (is_at_start_of_string === true || exists_in_string === true) {
        match_counter += 1;
        // cell.innerHTML = cell.innerText.replace(
        //  input_val,
        //  '<span class="matched_text">' + input_val + "</span>"
        //);
        // to replace with accurate case, see:  
        // https://stackoverflow.com/a/3294644/1063287
        var reg = new RegExp(input_val, 'i');
        cell.innerHTML = cell.innerText.replace(reg, '<span class="matched_text">$&</span>');
      }
    });

    if (match_counter > 0) {
      $(this).css("display", "table");
    } else {
      $(this).css("display", "none");
    }
  });
}

$(document).on("keyup", "input", function() {
  var input_val = $(this).val();
  var input_length = input_val.length;
  if (input_length > 2) {
    search_tds(input_val);
  } else if (input_length <= 2) {
    $("table").css("display", "table");
    $("span").removeClass("matched_text");
  }
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 80%;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
}

td,
th {
  border: 1px solid #000;
  text-align: left;
  padding: 8px;
  width: 33.3%;
}

.matched_text {
  background: yellow;
}

input {
  padding: 10px;
  width: 80%;
  margin: 10px auto;
  display: block;
  background: #eee;
  color: #505050;
  border: 1px solid #b0b0b0;
  font-size: 20px;
}

* {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="enter search text (3 characters minimum)...">

<table>

  <tbody>
    <tr>
      <td>011010</td>
      <td>best</td>
      <td>this text is not searched zest</td>
    </tr>
    <tr>
      <td>020110</td>
      <td>vest 011010</td>
      <td>this text is not searched jest</td>
    </tr>
  </tbody>

</table>

<br>

<table>

  <tbody>
    <tr>
      <td>808080</td>
      <td>Jest</td>
      <td>this text is not searched best</td>
    </tr>
    <tr>
      <td>805601</td>
      <td>Pest</td>
      <td>this text is not searched chest</td>
    </tr>
  </tbody>

</table>

<br>

<table>

  <tbody>
    <tr>
      <td>020101</td>
      <td>zest</td>
      <td>this text is not searched vest</td>
    </tr>
    <tr>
      <td>501025</td>
      <td>chesT</td>
      <td>this text is not searched 808080</td>
    </tr>
  </tbody>

</table>