覆盖tablesorter CSS

Question

我正在使用jQuery tablesorter gem。当页面加载时，我有一个代码来突出显示表中某些行的背景颜色。

由于使用了tablesorter，我猜它覆盖了css，并且不允许改变行的背景颜色。

这是代码。该函数在页面加载时自动加载。我将桌子分拣机移到了桌子上，然后试了一下。有用。我必须让它适用于表格分类器。

$(document).ready(function() { 
    var row, len, results; 
    row = 0; 
    results = []; 
    while (row < len) { 
     if ($("#tab1 #example_"+row+"chkbx").is(":checked")) { 
      $("#tab1 #example_" + row).css("background-color", "#c6b79f"); 
     } 
     row++; 
    } 
    return results; 
}); 

Answer 1

你这里有三个选项，..

$("#tab1 #example_" + row).css("background-color", "#c6b79f"); 

• 1）具有更好的特异性的选择。
• 2.）更改CSS文件。
• 3.）使用！重要。

该3rd option应该作为一个快速修复，但不好的做法。我更喜欢1st option。

$("#tab1 #example_" + row).css("background-color", "#c6b79f !important"); 

Answer 2

如果您使用的是tablesorter gem，我相信你会用我的tablesorter叉。

我有this demo与解析器，使用复选框来更改行颜色。它还会使用复选框状态更新缓存，以便您可以对该列进行排序。

此解析器不能与原始版本的tablesorter一起使用。

// add parser through the tablesorter addParser method 
$.tablesorter.addParser({ 
    id: 'checkbox', 
    is: function(s) { 
     return false; 
    }, 
    format: function(s, table, cell, cellIndex) { 
     var $t = $(table), $c = $(cell), c, 

     // resort the table after the checkbox status has changed 
     resort = false; 

     if (!$t.hasClass('hasCheckbox')) { 
      $t 
      .addClass('hasCheckbox') 
      // make checkbox in header set all others 
      .find('thead th:eq(' + cellIndex + ') input[type=checkbox]') 
      .bind('change', function(){ 
       c = this.checked; 
       $t.find('tbody tr td:nth-child(' + (cellIndex + 1) + ') input').each(function(){ 
        this.checked = c; 
        $(this).trigger('change'); 
       }); 
      }) 
      .bind('mouseup', function(){ 
       return false; 
      }); 
      $t.find('tbody tr').each(function(){ 
       $(this).find('td:eq(' + cellIndex + ')').find('input[type=checkbox]').bind('change', function(){ 
        $t.trigger('updateCell', [$(this).closest('td')[0], resort]); 
       }); 
      }); 
     } 
     // return 1 for true, 2 for false, so true sorts before false 
     c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2; 
     $c.closest('tr')[ c === 1 ? 'addClass' : 'removeClass' ]('checked'); 
     return c; 
    }, 
    type: 'numeric' 
});