jQuery：对表格列而不是行进行排序

Question

我想按列的头部字段对表格进行排序。表示我想将行保持在同一位置，但列的顺序应根据列标题字段（td）进行排序。

例如：

排序前的表格：

assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|
assign1|assign3|assign2|assign4|

排序后：

assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|
assign1|assign2|assign3|assign4|

---

@seth 我必须对带有标题的列进行排序（更改顺序）。

@CMS 我已经尝试过 tablesorter 插件和这个插件对行进行排序。意味着它以升序或降序更改行的顺序。

但我的问题不同，我必须更改列的顺序，其标题单元格按升序或降序排列。

请看我的例子。

Answer 1

好的，这是我整理的。它可能不是最优雅或最干净的，但它确实有效。

// sorting function for the headers
function th_sorter(a, b) {
   // just compare the text
   var cmp = $(a).text() > $(b).text();
   if (cmp) {
     return 1;
   }
   else {
     return $(a).text() === $(b).text() ? -1 : 0;
   }
}

var sorted = [], temp=[];
// first sort the 1st row so we can figure out what goes where
$('table tr:first').each(
  function(i, tr) {
      $(tr).children('td').each( function(idx,node) {
        $(node).data('orig', idx);
      }).sort( th_sorter ).each( function(idx, node) {
        sorted.push( { 
            html: $(node).html(), 
            idx: $(node).data('orig') 
          } );
      });
});

// now re-arrange the deck chairs
$('table tr').each( function(i, tr) {
  // double each, once to capture and once to move                                          
  $(tr).children('td').each( function( idx, node) {
    temp[idx] = $(node).html();
  }).each( function(idx,node) {
    $(node).html( temp[ sorted[idx].idx ] );
  });
  temp = [];
});

Demo page

Answer 2

看看这个插件：

• jQuery.Tablesorter