Javascript 向可排序列添加样式

我有以下代码：

HTML

<table id="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    ...
  </tbody>
</table>

第1栏
第2栏
...
...
...

脚本

<script type="text/javascript">
  $("#table").tablesorter();
</script>

<script type="text/javascript">    
function SortableTableCtrl() {
        var scope = this;

        // data
        scope.head = {
            a: "Name",
            b: "Surname",
            c: "City"
        };
        scope.body = [{
            a: "Hans",
            b: "Mueller",
            c: "Leipzig"
        }, {
            a: "Dieter",
            b: "Zumpe",
            c: "Berlin"
        }, {
            a: "Bernd",
            b: "Danau",
            c: "Muenchen"
        }];

        scope.sort = {
            column: 'b',
            descending: false
        };

        scope.selectedCls = function(column) {
            return column == scope.sort.column && 'sort-' + scope.sort.descending;
        };

        scope.changeSorting = function(column) {
            var sort = scope.sort;
            if (sort.column == column) {
                sort.descending = !sort.descending;
            } else {
                sort.column = column;
                sort.descending = false;
            }
        };
    }
</script>

$（“#表”）.tablesorter（）；

如何向可排序列的标记添加特殊选择器？

如下所示

脚本

<script type="text/javascript">
  $("#table").tablesorter();
</script>

<script type="text/javascript">    
function SortableTableCtrl() {
        var scope = this;

        // data
        scope.head = {
            a: "Name",
            b: "Surname",
            c: "City"
        };
        scope.body = [{
            a: "Hans",
            b: "Mueller",
            c: "Leipzig"
        }, {
            a: "Dieter",
            b: "Zumpe",
            c: "Berlin"
        }, {
            a: "Bernd",
            b: "Danau",
            c: "Muenchen"
        }];

        scope.sort = {
            column: 'b',
            descending: false
        };

        scope.selectedCls = function(column) {
            return column == scope.sort.column && 'sort-' + scope.sort.descending;
        };

        scope.changeSorting = function(column) {
            var sort = scope.sort;
            if (sort.column == column) {
                sort.descending = !sort.descending;
            } else {
                sort.column = column;
                sort.descending = false;
            }
        };
    }
</script>

函数sortableCtrl（）{
var范围=此；
//资料
scope.head={
a:“姓名”，
b:“姓”，
c:“城市”
};
scope.body=[{
a:“汉斯”，
b:“米勒”，
c:“莱比锡”
}, {
答：“节食者”，
b:“尊佩”，
c：“柏林”
}, {
答：“伯纳德”，
b:“达瑙”，
c:“慕尼黑”
}];
scope.sort={
列：“b”，
降序：假
};
scope.selectedCls=函数（列）{
返回列==scope.sort.column&“sort-”+scope.sort.descending；
};
scope.changeSorting=函数（列）{
var sort=scope.sort；
if（sort.column==列）{
sort.descending=！sort.descending；
}否则{
sort.column=列；
sort.descending=false；
}
};
}

---

像这样吗？

我通过搜索

tablesorter（）

如果您正在使用此插件，则可以如下设置背景色：

$("#table").tablesorter().css('background-color','#f00');

您可以尝试my，它包含用于设置列样式的

列

小部件。小部件将类名添加到列中的每个单元格中，这样就可以使用css完成样式设置。但是，对于非常大的表，它变得相当慢

$(function() {

  $("table").tablesorter({
    theme : 'blue',

    sortList : [[1,0],[2,0],[3,0]],

    // initialize zebra striping and column styling of the table
    widgets : ["zebra", "columns"],

    widgetOptions : {
      // change the default column class names
      // primary is the first column sorted, secondary is the second, etc
      columns : [ "primary", "secondary", "tertiary" ],
      // include thead when adding class names
      columns_thead : true,
      // include tfoot when adding class names
      columns_tfoot : true
    }

  });

});

---

查看。

我想为可排序列添加背景色