Lọc JQuery - Các nút và Tìm kiếm

Aug 25 2020

Tôi đang tìm cách lọc bảng này bằng CẢ HAI nút có thể nhấp "và" tìm kiếm đầu vào. Tôi có một nhóm nút trong đó mỗi nút có một sự kiện onclick để lọc các hàng và tìm kiếm lọc các hàng bằng chức năng keyup. Mỗi người hoạt động riêng lẻ nhưng tôi muốn chúng làm việc cùng nhau.

1. nhấp vào nút (hàng đã lọc)

2.Thêm tìm kiếm văn bản (các hàng hiển thị được lọc lại)

hoặc ngược lại hoặc chỉ bước 1 hoặc bước 2

VĨ CẦM http://jsfiddle.net/rbla/Lh3kpxg2/29/

var $rowsss = $('#table tr:visible');

$('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rowsss.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); $("#all").click(function() {
  var rows = $("#table").find("tr").show(); }); $("#green").click(function() {
  var rows = $("#table").find("tr").hide(); rows.filter(":contains('Green')").show(); }); $("#orange").click(function() {
  var rows = $("#table").find("tr").hide(); rows.filter(":contains('Orange')").show(); }); $("#lemon").click(function() {
  var rows = $("#table").find("tr").hide();
  rows.filter(":contains('Lemon')").show();
});

body {
  padding: 20px;
}

input {
  margin-bottom: 5px;
  padding: 2px 3px;
  width: 209px;
  margin-top: 5px;
}

td {
  padding: 4px;
  border: 1px #CCC solid;
  width: 100px;
}

.buttons-wrapper {
  clear: both;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 1%;
}

.my-radio-button {
  position: absolute;
  left: -9999em;
  top: -9999em;
}

.my-radio-button+label {
  float: left;
  padding: .5em 1em;
  cursor: pointer;
  border: 1px solid #28608f;
  margin-right: -1px;
  color: #fff;
  /* background-color: #428bca; */
  background-color: blue;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  /* text-transform: uppercase; */
}

.my-radio-button+label:first-of-type {
  border-radius: .7em 0 0 .7em;
}

.my-radio-button+label:last-of-type {
  border-radius: 0 .7em .7em 0;
}

.my-radio-button:checked+label {
  /* background-color: #3277b3; */
  background-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons-wrapper">

  <input type="radio" class="my-radio-button" name="radioButtonTest" value="1" id="all" checked />
  <label for="all">All</label>

  <input type="radio" class="my-radio-button" name="radioButtonTest" value="2" id="green" />
  <label for="green">Green</label>

  <input type="radio" class="my-radio-button" name="radioButtonTest" value="3" id="orange" />
  <label for="orange">Orange</label>

  <input type="radio" class="my-radio-button" name="radioButtonTest" value="4" id="lemon" />
  <label for="lemon">Lemon</label>

</div><br clear="all">

<input type="text" id="search" placeholder="Type to search">

<table id="table">

  <tr>
    <td>Apple</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Blue</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Lemon</td>
    <td>Black</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Blue</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Lemon</td>
    <td>Black</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Lemon</td>
    <td>Black</td>
  </tr>

</table>

Trả lời

1 mplungjan Aug 25 2020 at 01:48

Mã này bây giờ

xử lý backspace / trường trống
xử lý việc nhấp vào nút trong khi trường tìm kiếm được lấp đầy
sẽ xóa tìm kiếm nếu bạn nhấp vào tất cả
khá KHÔ

Bạn có thể loại bỏ chức năng titleCase nếu bạn thay đổi ID của các nút giống với cột thứ hai HOẶC nếu bạn thay đổi cột thứ hai để có ID chữ thường làm thuộc tính