jQuery Tabelle Zeile Filtern nach Spalte

Ich versuche, die filter-Tabelle Zeilen in eine intelligente Art und Weise (im Gegensatz zu nur Tonnen von code, der die Arbeit schließlich), aber einen eher trockenen inspiration.

Ich habe 5 Spalten in meiner Tabelle. An der Spitze jeder entweder gibt es ein dropdown oder ein Textfeld, mit dem die Benutzer können die Tabelle filtern-Daten (im Grunde ausblenden der Zeilen, die nicht für)

Gibt es viele-Tabelle filtern-plugins für jQuery, aber keine, die funktionieren ganz genau so, und das ist der komplizierte Teil 😐

InformationsquelleAutor Jimbo | 2010-08-11

10

Hier ist ein Beispiel für einfache filter http://jsfiddle.net/urf6P/3/

Es verwendet die jquery-selector :contains('some text') und nicht(:contains('some text')) zu entscheiden, ob jeder Zeile angezeigt werden soll oder ausgeblendet. Dies kann erhalten Sie gehen in eine Richtung.

BEARBEITET, enthalten die HTML-und javascript aus dem jsfiddle:
```
$(function() {    
    $('#filter1').change(function() { 
        $("#table td.col1:contains('" + $(this).val() + "')").parent().show();
        $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
    });

});
```
Dies ist eine ziemlich effiziente Möglichkeit, es zu tun, aber am besten von allen, so wenig code 😛 Danke
jsfiddle.net/urf6P/1073... nicht für mich arbeiten
sehr schöne Lösung!

InformationsquelleAutor Jeff Treuting

Dies ist möglicherweise nicht der beste Weg, es zu tun, und ich bin nicht sicher über die Leistung, aber eine option wäre die tag-jede Spalte (in jeder Zeile) mit einer id, beginnend mit einer Spalte id und dann eine eindeutige Nummer, die wie eine Datensatz-id.

Zum Beispiel, wenn Sie hatte eine Spalte Erzeugen, den Namen und die Datensatz-ID 763, würde ich etwas wie die folgende:

<table id="table1">
    <thead>
        <tr>
            <th>Artist</th>
            <th>Album</th>
            <th>Genre</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="artist-127">Red Hot Chili Peppers</td>
            <td id="album-195">Californication</td>
            <td id="genre-1">Rock</td>
            <td id="price-195">$8.99</td>
        </tr>
        <tr>
            <td id="artist-59">Santana</td>
            <td id="album-198">Santana Live</td>
            <td id="genre-1">Rock</td>
            <td id="price-198">$8.99</td>
        </tr>
        <tr>
            <td id="artist-120">Pink Floyd</td>
            <td id="album-183">Dark Side Of The Moon</td>
            <td id="genre-1">Rock</td>
            <td id="price-183">$8.99</td>
        </tr>
    </tbody>
</table>

Anschließend können Sie mit jQuery filtern, basierend auf den start der id.

Zum Beispiel, wenn man wollte, einen filter für die Spalte "Interpret":

var regex = /Hot/;
$('#table1').find('tbody').find('[id^=artist]').each(function() {
    if (!regex.test(this.innerHTML)) {
        this.parentNode.style.backgroundColor = '#ff0000';
    }
});

statt nur nach ID, was ist, wenn ich suchen will, jeder Spalte, in jeder Zeile?
jsfiddle.net/qppz7vp6

InformationsquelleAutor Nate Pinchot

Leicht die Verbesserung der akzeptierte Lösung geschrieben von Jeff Treuting, Filterfunktionen erweitert werden kann, um es groß-und Kleinschreibung. Ich nehme keinen Kredit für die ursprüngliche Lösung oder sogar die Erweiterung. Die Idee der Erweiterung wurde aufgehoben von eine Lösung gepostet, die auf einem anderen SO posten angeboten von Highway des Lebens.

Hier geht es:

//Define a custom selector icontains instead of overriding the existing expression contains
//A global js asset file will be a good place to put this code
$.expr[':'].icontains = function(a, i, m) {
  return $(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

//Now perform the filtering as suggested by @jeff
$(function() {    
    $('#filter1').on('keyup', function() {  //changed 'change' event to 'keyup'. Add a delay if you prefer
        $("#table td.col1:icontains('" + $(this).val() + "')").parent().show();  //Use our new selector icontains
        $("#table td.col1:not(:icontains('" + $(this).val() + "'))").parent().hide();  //Use our new selector icontains
    });

});

InformationsquelleAutor Fr0zenFyr

Schritt:1 schreiben Sie die folgenden in .html-Datei

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

Schritt:2 schreiben Sie die folgenden in .js-Datei

function myFunction() {
  //Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  //Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

InformationsquelleAutor solanki...

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.