代码之家 › 专栏 › 技术社区 › yoda

更改类似表的项目顺序

markup html-table jquery javascript

yoda · 技术社区 · 15 年前

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

更具体地说,我需要捕获每个“列”中的值,并将其重定向到所选的键,然后对表重新排序。

我使用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>

有什么想法吗?

1 回复 | 直到 8 年前

David Hedlund 15 年前

假设您有一个对象数组,其中每个对象对应一个表行,每个对象都有对应于表列的属性。

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

现在,如果你的数据是这样排列的,你可以创建一个函数,你可以说 drawTable(table)

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

推荐文章

Mona Jalal · 在HTML中使用PHP显示表的内容

2 年前

free · 基于特定默认列对表进行排序

2 年前

CRaw · 表格中的标题文本对齐:前2个单元格左对齐,后3个单元格右对齐

2 年前

Bryan Santos · 固定表头与引导

2 年前

Muhammad Moosa Zubairy · 在div之后得到不需要的逗号

3 年前

buckshot · 使用CSS隐藏gridview中的某些列

3 年前

SeniorFluffie · 完整动态HTML表悬停事件不工作

6 年前

Smithy · 如何将此文本置于电子邮件模板中表格行的中心

6 年前

user7158897 · 如何基于地图区域单击显示/隐藏不同的表内容

6 年前

user9727941 · 不知道如何在空白td中插入这些数据

6 年前