Question

我有一些工作的js根据通过input元素提供的文本搜索表格。每个表都有自己的输入元素。所有表都具有相同的类名，所有输入元素也是如此。如何使用jquery指定＆＃39;这个＆＃39;特定输入应仅在下面的下表中搜索。

jquery的

$(document).ready(function () {
  $(".searchTable").on("keyup", function () {

    var value = $(this).val().toLowerCase();

    $(".matchTable tr").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });

  });
});

HTML

<div class="pbTable">
    <div class="name">
      <input type="search" name="" value="" placeholder="SEARCH" class="searchTable">
    </div>

    <table class="matchTable">
      <thead>
        <tr>
          <th>heading</th>
          <th>heading</th>
          <th>heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>

      </tbody>
    </table>

  </div>
<div class="pbTable">
    <div class="name">
      <input type="search" name="" value="" placeholder="SEARCH" class="searchTable">
    </div>

    <table class="matchTable">
      <thead>
        <tr>
          <th>heading</th>
          <th>heading</th>
          <th>heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>

      </tbody>
    </table>

  </div>

Answer 1

以下应该让它发挥作用

  $(".searchTable").on("keyup", function () {

    var value = $(this).val().toLowerCase();

    $(this).closest('.pbTable').find(".matchTable tr").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });

  });

Answer 2

您需要通过查看当前输入的父级来获取当前表。

$(document).ready(function () {
  $(".searchTable").on("keyup", function () {

    var value = $(this).val().toLowerCase();
    var table = $(this.parentNode.parentNode).find('.matchTable')[0];

    $(table).find("tr").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });

  });
});

一次从具有相同类名

2 个答案: