Изменить порядок табличных элементов

Question

У меня есть набор таблиц типа divs (со строками и столбцами), чтобы отобразить футбольный стол. Теперь я должен иметь возможность упорядочить эту таблицу в соответствии с выбранным ключом, не обновляя страницу и не используя ajax.

Чтобы быть более конкретным, мне нужно перехватить значения внутри каждого "столбца", относящиеся к выбранному ключу, и изменить порядок таблицы.

Я использую jQuery, поэтому работа должна быть довольно простой, просто я не уверен, как переупорядочить массив с идентификатором команды и столбцом в причине. Кстати, все значения в таблице являются числовыми.

Ниже приведен пример разметки (строки):

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