JQuery - Wie filtert ich Zeilen onClick?

Question

Ich versuche herauszufinden, wie man eine Tabelle basierend auf der Zeilenklasse filtert, wenn ich auf eine Schaltfläche klicke. Ich habe mir verschiedene JQuery -Plugins angesehen, aber keiner von ihnen scheint das zu tun, was ich tun muss. Einige haben Textboxen, die filtern usw., und ich habe versucht, den Code anzupassen, aber ehrlich gesagt mache ich nur ein großes Chaos ... Hilfe? Ich habe einen Tisch, der so aussieht:

<table>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
</table>

Und ich habe drei Knöpfe:

<input type="button" name="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" name="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" name="filtermr" /> <!-- clicking this will only show rows with mr class -->

Answer 1

Sie können so etwas wie unten für jeden Schaltflächenklick tun, es sollte funktionieren.

$("tr:not(.dr)").hide();
$("tr.dr").show();

Dh:

$(document).ready(function(){
    $(":button[name='filterdr']").click(function(){
        $("tr:not(.dr)").hide();
        $("tr.dr").show();
    });
});

Answer 2

So etwas könnte den Trick machen:

$('input[type=button]').click(function()
{
    $('tr').hide()
        .filter('.' + this.name.replace(/filter/, '')).show();
});

Das Hinzufügen einer ID zu Ihrer Tabelle wäre eine gute Idee.

Answer 3

<input type="button" id="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" id="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" id="filtermr" /> <!-- clicking this will only show rows with mr class -->

JQuery:

$('#filterdr').click(function() { 
   $('table tr').hide();
   $('table tr.dr').show();
});

Und Sie tun dasselbe für die anderen Tasten.

Answer 4

DataTables tut genau das, was Sie brauchen:

• Spalten- oder Zeilenfilterung
• Ereignisbehandlung für die Erstellung von Reihen
• Filterung für alle Spalten aus einem einzigen Suchtextfeld
• Multikolen -Sortierung
• Bearbeitbare Reihen

Ich habe dies bei Produktionsprojekten und in einigen Fällen verwendet, um Datatables über Telerik Radgrad zu verwenden. Es ist sehr flexibel und toll für RIA.