JQuery Filtering - Tombol dan Pencarian

Aug 25 2020

Saya ingin memfilter tabel ini dengan KEDUA tombol yang dapat diklik "dan" pencarian input. Saya memiliki grup tombol di mana setiap tombol memiliki acara onclick untuk menyaring baris dan pencarian menyaring baris dengan fungsi keyup. Masing-masing bekerja secara terpisah tetapi saya ingin mereka bekerja sama.

1. klik tombol (baris difilter)

2. Tambahkan pencarian teks (baris yang terlihat disaring lagi)

atau sebaliknya atau hanya langkah 1 atau langkah 2

BIOLA 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>

Jawaban

1 mplungjan Aug 25 2020 at 01:48

Kode ini sekarang

menangani backspace / bidang kosong
menangani mengklik tombol saat kolom pencarian diisi
akan menghapus pencarian jika Anda mengklik semua
cukup KERING

Anda dapat menghilangkan fungsi titleCase jika Anda mengubah ID tombol menjadi sama dengan kolom kedua ATAU jika Anda mengubah kolom kedua untuk memiliki ID huruf kecil sebagai atribut