更改表格式项目顺序

Question

我有一组divs表（带行和列），用于显示足球表。现在，我需要能够根据所选的密钥对该表进行排序，而无需刷新页面并避免使用ajax。

更具体一点，我需要捕捉每个“columm”中的值。拒绝选择的钥匙并重新订购。

我使用jQuery，所以工作应该相当简单，只是不确定如何使用团队的id和原因列重新排序数组。顺便说一下，表值都是数值。

下面是标记（行）的示例：

<div class="rb">
        <div class="cname">Benfica</div>
        <div class="tdr bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold">0</div>
</div>

有什么想法吗？

Answer 1

假设您有一个对象数组，其中每个对象对应一个表行，并且每个对象都具有与表列对应的属性。

var table = [
   { rowId: 1, teamName: 'Man U', country: 'England' },
   { rowId: 2, teamName: 'FC Barcelona', country: 'Spain' }
];

现在，如果您的数据安排如下，您可以创建一个函数，您只需说出 drawTable（table），它就会创建您想要的HTML标记。然后，您可以在该变量中进行排序，如下所示：

function sortTable(table, column) {
    table.sort(function(x,y) { return x[column] > y[column]; });
    return table;
}

$('#sortByTeamName').click(function() {
   table = sortTable(table, 'teamName');
   drawTable(table);
});