تحديد الصفوف في Tablesorter

Question

أنا مستخدم فارز الطاولة مكون إضافي لـ jQuery (أنا متأكد من أن الآخرين يعرفون ذلك) في مشروعي.أحتاج إلى إضافة ميزة حيث عندما ينقر المستخدمون على صف ما، يتم تحديده.لقد قمت بتجربة الكود التالي ولكنه لا يعمل.

$('#myTable tr').click(function(event) {
     $(this).addClass('selected');

 });

هل يمكن لأحد أن يقول لي أفضل طريقة للقيام بذلك؟هل هناك أي مكون إضافي لهذا بالفعل؟

شكرا لك مقدما،
عبد العكارة

Answer 1

أعتقد أن Tablesorter يعيد إنشاء الجدول بأكمله، لذلك قد يكون هذا هو سبب عدم وجود تغيير لأنه "يدمر" حدث النقر المرتبط بـ tr.يجب أن تجرب ذلك باستخدام حدث مباشر ومعرفة ما إذا كان ذلك ناجحًا: توثيق الأحداث المباشرة على jQuery.com

Answer 2

لتمكين اختيار وتبديل إلغاء تحديد عبر toggleClass مسج على:

$(document).ready( function() {
    /* jQuery v1.11.1 */
    $( "table.tablesorter tbody tr" ).click(function() {
      $( this ).toggleClass( "selected" );
    });
});

/* CSS for hover row & select/lock the row with color */
table.tablesorter tbody tr:hover td {
    background-color: #f4f5f6;
}
table.tablesorter tbody tr.selected td {
    background-color: #f4f5f6;
}

Answer 3

وهذا يبدو تصحيح لي. هل لديك فئة CSS المعرفة لtr.selected؟

وربما عند النقر، يمكنك ضرب العنصر الدفتيريا وليس طن تبريد. ربما تحتاج إلى استخدام الوالد:

http://docs.jquery.com/Traversing/parent

وشيء من هذا القبيل (غير مجربة):

$('#myTable td').click(function(event) {
         $(this).parent("tr").addClass('selected');

 });

Answer 4

وماذا لديك يبدو الصحيح. هل تنفيذه بعد الوثيقة جاهزة؟

$(function() {
    $('#myTable tr').click(function() {
         $(this).addClass('selected');
    });
});

وبدلا من ذلك، يمكن استخدام live الأحداث.

$('#myTable tr').live('click', function() {
     $(this).addClass('selected');
});

Answer 5

وانقر فوق الحدث لديك يبدو أن تعمل على ما يرام على مائدتي، أنا فقط أتساءل كيف سيكون إلغاء تحديد عن طريق النقر مرة أخرى؟ ربط متغير إلى ما إذا كان المحدد هو يبدو حلا سهلا، ولكن كيف أفعل ذلك؟

والعفو لي الإجابة على سؤالك بسؤال آخر وبلدي جدة إلى JS.