javascript - 覆盖表格排序器 CSS

Question

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

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

这是代码。此功能在页面加载时自动加载。我将 table-sorter 删除到 table 并尝试了这个。有用。我必须让它与应用的表格分类器一起工作。

$(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分支。

我有一个带有解析器的演示，该解析器使用复选框来更改行颜色。它还使用复选框状态更新缓存，以便您可以对该列进行排序。

此解析器不适用于原始版本的 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'
});