排序列表而不是行

Question

我有一个表格，我的标题在第一列。我搜索一个方法来按这个列对我的表进行排序。我知道datatable和tablesorter，但我没有找到任何解决方案来排序我的表。

需要明确的是，这里是我的表的例子：

Name | John | Jane | Toto 
Value| 1256 | 125 | 8563 
Val2 | 12 | 45 | 3 

（下面的代码上的jsfiddle一个开始：https://jsfiddle.net/nLwo8bya/1/）

我想点击一个单元格中的第一列按此行对其他列进行排序。

如果我点击的名字，上表为：

Name | Jane | John | Toto 
Value| 125 | 1256 | 8563 
Val2 | 45 | 12 | 3 

表的列现在是按名称排序（在这种情况下，第一行）。

在此先感谢您的帮助

编辑：像NNNNNN说，我想列进行排序，由第一个

Answer 1

浮现在脑海的第一种方式是重组这样，你最终表与一个行，每列一个td;这些列tds中的每一个都将包含一个嵌套表格以及该列的数据。这样，实际的排序过程非常简单，因为您只需对顶层tds进行排序。

复杂的部分是重组。以下只是我为了实现这一目标而写的第一批丑陋的代码。这大概可以收拾和优化颇多，或完全在一个更聪明的方式重写，但我将它作为一个练习留给读者......

$(document).ready(function(){ 
 
    var trs = $("table tr"); 
 
    var tds = trs.find("td"); 
 
    var columnCount = trs.first().children().length; 
 
    var columns = []; 
 
    var sortableTR = $("<tr></tr>"); 
 
    for (var i = 0; i < columnCount; i++) 
 
    columns.push([]); 
 

 
    tds.each(function(i,td) { 
 
    columns[i%columnCount].push($("<tr></tr>").append(td)); 
 
    }); 
 
    columns.forEach(function(v) { 
 
    sortableTR.append($("<td></td>").append($("<table></table>").append(v))); 
 
    }); 
 
    trs.remove("tr"); 
 
    $("table").append(sortableTR); 
 
    sortableTR.children().first().on("click", "tr", function(e) { 
 
    var row = $(this); 
 
    var rowIndex = row.index(); 
 
    var dataType = row.find("td").attr("data-type"); 
 
    var cols = sortableTR.children().slice(1); 
 
    cols.sort(function(a, b) { 
 
     a = $(a).find("td").eq(rowIndex).text(); 
 
     b = $(b).find("td").eq(rowIndex).text(); 
 
     if (dataType==="number") { 
 
     a = +a; 
 
     b = +b; 
 
     } 
 
     return a > b ? 1 : a < b ? -1 : 0; 
 
    }); 
 
    cols.each(function() { sortableTR.append(this); }); 
 
    }); 
 
});

table, tr, td { border: none; border-collapse: collapse; } 
 
td { width: 100px; padding: 0px; margin: 0px; } 
 
td td { border: thin grey solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table border="1"> 
 
<tr><td data-type="string"><b>Name</b></td><td>John</td><td>Jane</td><td>Jack</td></tr> 
 
<tr><td data-type="number"><b>Age</b></td><td>36</td><td>34</td><td>42</td></tr> 
 
<tr><td data-type="number"><b>Weight</b></td><td>111</td><td>56</td><td>82</td></tr> 
 
<tr><td data-type="number"><b>Score</b></td><td>25</td><td>42</td><td>18</td></tr> 
 
</table>

请注意，我说一个data-type属性的标题单元格，以便排序知道是否将数据视为数字或不。

固定在所得到的表的样式是另一回事，我离开作为练习读者...

Answer 2

排序列

// create headings array to sort 
var headings = $('#sortedTable tr:first td:gt(0)').map(function(item){  
     return $(this).text() 
    }).get(); 
    // copy and sort new array 
    var sortedHeadings = headings.slice().sort(); 
    // create object where old index is key, value is new index 
    var indices = headings.reduce(function(a,c,i){ 
    a[i]= sortedHeadings.indexOf(c); 
    return a; 
    },{}); 
    // iterate rows and sort cells 
    $('#sortedTable tr') .each(function(i){ 
    // sort using index hash object above 
    var $cells = $(this).children(':gt(0)').sort(function(a,b){ 
     return indices[$(a).index()]-indices[$(b).index()] 
    }); 
    // append sorted cells 
    $(this).append($cells) 
    }); 

DEMO