javascript - 更改类似表格的项目顺序

Question

我有一组类似表格的 div(带有行和列)，用于显示足球 table 。现在，我需要能够根据所选的键对该表进行排序，而无需刷新页面并避免使用 ajax。

更具体地说，我需要在每个“列”中捕获引用所选键的值并重新排序表。

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

下面是标记(行)的示例:

<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);
});