jQuery - كيفية تصفية الصفوف onclick؟

Question

أحاول معرفة كيفية تصفية جدول بناء على فئة الصف عند النقر فوق زر. لقد كنت أبحث في الإضافات المسج المختلفة، ولكن لا يبدو أن أي منهم يفعلون ما أحتاجه للقيام به. يحتوي البعض على مربعات النصر التي مرشح، وما إلى ذلك، وحاولت تكييف الشفرة ولكن بصراحة، أنا مجرد فوضى كبيرة كبيرة ... مساعدة؟ لدي جدول يشبه هذا:

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

ولدي ثلاثة أزرار:

<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

يمكنك القيام بشيء مثل أدناه على التوالي لكل زر، يجب أن تعمل.

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

بمعنى آخر:

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

Answer 2

شيء من هذا القبيل قد يفعل الخدعة:

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

ستكون إضافة معرف إلى طاولتك فكرة جيدة.

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();
});

وأنت تفعل الشيء نفسه بالنسبة للأزرار الأخرى.

Answer 4

DataTables. هل بالضبط ما تحتاجه:

• ترشيح العمود أو الصف
• التعامل مع الحدث على إنشاء صف
• تصفية لجميع الأعمدة من مربع نص بحث واحد
• الفرز متعدد الألوان
• صفوف قابلة للتحرير

لقد استخدمت هذا في مشاريع الإنتاج وبعض الحالات التي اخترتها استخدام DataTables على Telerik Radgrad. انها مرنة جدا وجاهزة بالنسبة للرياضة.