Изменить порядок табличных элементов
-
05-07-2019 - |
Вопрос
У меня есть набор таблиц типа 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>
Есть мысли?
Решение
Допустим, у вас есть массив объектов, где каждый объект соответствует строке таблицы, а каждый объект имеет свойства, соответствующие столбцам таблицы.
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);
});