javascript - 为复杂表构建排序器和过滤器

Question

目前我正在构建一个包含大量数据的复杂表，与示例有点相似，我想使用 jquery 添加排序器和过滤器功能，并具有弹出样式，如图像 谁能提供解决方案吗？

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        <div>
          <input type="text" placeholder="Search for names.." class="myInput">
        </div>
        Firstname
      </th>
      <th>
        <div>
          <input type="text" placeholder="Search for lastnames.." class="myInput"> </div>
        Lastname
      </th>
      <th>
        <div>
          <input type="text" placeholder="Search for email.." class="myInput">
        </div>
        Email
      </th>
      <th>
        <select>
          <option></option>
          <option>x</option>
          <option>N/A</option>
        </select>
        decide
      </th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
      <td>x</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@mail.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@greatstuff.com</td>
      <td>x</td>
    </tr>
    <tr>
      <td>Anja</td>
      <td>Ravendale</td>
      <td>a_r@test.com</td>
      <td></td>
    </tr>
  </tbody>
</table>

我已经添加了到目前为止我所做的juqery工作，似乎它无法对每个列起作用。对于选择部分，我不知道如何像文本部分一样实现

Answer 1

为你做了这个厨师，如果你喜欢的话可以装饰它

jsfiddle

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

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  height:0px;
  min-width: 160px;

  padding: 3px;
  z-index: 1;
  transition:0.3s;
  overflow:hidden;
}

.dropdown:hover .dropdown-content {
  height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        <div class="dropdown">
          <span>Firstname</span>
          <div class="dropdown-content">
            <p> <input type="text" placeholder="Search for names.." class="myInput"></p>
          </div>
        </div>
      </th>
      <th>
            <div class="dropdown">
  <span>Email</span>
  <div class="dropdown-content">
    <p> <input type="text" placeholder="Search for names.." class="myInput"></p>
  </div>
</div>
      </th>
      <th>
            <div class="dropdown">
  <span>Email</span>
  <div class="dropdown-content">
    <p> <input type="text" placeholder="Search for names.." class="myInput"></p>
  </div>
</div>
      </th>
      <th>
                  <div class="dropdown">
  <span>Email</span>
  <div class="dropdown-content">
    <p>  <select>
          <option></option>
          <option>x</option>
          <option>N/A</option>
        </select></p>
  </div>
</div>
        decide
      </th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
      <td>x</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@mail.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@greatstuff.com</td>
      <td>x</td>
    </tr>
    <tr>
      <td>Anja</td>
      <td>Ravendale</td>
      <td>a_r@test.com</td>
      <td></td>
    </tr>
  </tbody>
</table>