使用複選框在全行表上添加背景顏色

Question

我目前正在編寫分頁，此分頁涉及使用tablesorter.com進行排序的列。

請參閱tablesorter中的jquery代碼的底部，它允許我在每一行上使用帶有複選框的分揀機，一旦複選框被選中，我想使用css添加背景顏色，如果複選框不勾選然後刪除背景顏色，有沒有人幫助我如何爲背景顏色編寫額外的代碼行！

非常感謝。

$(function() { 

     // add ie checkbox widget 
     $.tablesorter.addWidget({ 
      id: "iecheckboxes", 
      format: function(table) { 
       if($.browser.msie) { 
        if(!this.init) { 
         $(":checkbox",table).change(function() { this.checkedState = this.checked});     
         this.init = true; 
        } 
        $(":checkbox",table).each(function() { 
         $(this).attr("checked",this.checkedState); 
        }); 
       } 
      } 
     }); 

     $("table").tablesorter({widgets: ['iecheckboxes']}) 


    }); 

Answer 1

你並不需要一個小部件來做到這一點（demo）：

$(function() { 
    var $table = $('table'), 
     checkboxColumn = 0; 

    // checkboxes updates 
    $table.find('tbody').on('change', 'input', function() { 
     var $cell = $(this).closest('td'); 
     // only accept checkboxes in the first column 
     if ($cell[0].cellIndex === checkboxColumn) { 
      $cell.closest('tr').toggleClass('checked', this.checked); 
      // update cache with checkbox state 
      $table.trigger('updateCell', [ $cell[0] ]); 
     } 
    }); 

    $table.find('thead input').on('change', function(){ 
     var chk = this.checked; 
     $table.find('tbody tr').each(function(){ 
      $(this).find('td:eq(' + checkboxColumn + ') input') 
       .prop('checked', chk) 
       .trigger('change'); 
     }); 
    }); 

    var headers = {}; 
    headers[checkboxColumn] = { sorter: false }; 

    $table.tablesorter({ 
     widgets: ['zebra'], 
     headers: headers 
    }); 
}); 

與原來的tablesorter上述作品。