JQuery-Filterung - Schaltflächen und Suche

Aug 25 2020

Ich möchte diese Tabelle mit BEIDEN anklickbaren Schaltflächen "und" Eingabesuche filtern . Ich habe eine Schaltflächengruppe, in der jede Schaltfläche ein Onclick-Ereignis zum Filtern der Zeilen und die Suche zum Filtern der Zeilen mit der Keyup-Funktion hat. Jeder arbeitet separat, aber ich möchte, dass sie zusammenarbeiten.

1.Klicken Sie auf eine Schaltfläche (Zeilen gefiltert)

2. Textsuche hinzufügen (sichtbare Zeilen erneut gefiltert)

oder umgekehrt oder nur Schritt 1 oder Schritt 2

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

Antworten

1 mplungjan Aug 25 2020 at 01:48

Dieser Code jetzt

behandelt Rücktaste / leeres Feld
behandelt das Klicken auf eine Schaltfläche, während das Suchfeld gefüllt ist
löscht die Suche, wenn Sie auf alle klicken
ist ziemlich trocken

Sie können die titleCase-Funktion entfernen, wenn Sie die IDs der Schaltflächen so ändern, dass sie mit der zweiten Spalte übereinstimmen, ODER wenn Sie die zweite Spalte so ändern, dass die ID in Kleinbuchstaben als Attribut verwendet wird