javascript - 将样式添加到可排序列

Question

我有这个代码：

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>

脚本

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

如何将特殊选择器添加到可排序列的标签？

Answer 1

你可以试试我的 tablesorter 分支，它包含一个columns用于设置列样式的小部件。该小部件将类名添加到列中的每个单元格，因此可以使用 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
    }

  });

});

在这里查看演示。

Answer 2

像这样

演示

脚本

<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>

演示2

Answer 3

像这样？

我通过搜索找到了一个jQuery 插件tablesorter()

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 

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

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