сортировка строк таблицы
Доброго времени уважаемым гуру javascript'а. Что-то я никак не врублюсь как вывести после сортировки строк таблицы. Вроде всё понятно - загоняю строки в массив, потом его
массив.sort. А как потом отобразить? |
atanov,
appendChild |
|
Попробую эту тему оживить.
Скорее всего руки кривые, вряд ли sort работает неправильно, но...
function sorttable (e){
var tbody = document.getElementsByTagName('tbody')[1];
var rowsArray = [].slice.call(tbody.rows);
var compare;
compare = function(rowA, rowB) {
return rowA.cells[2].textContent > rowB.cells[2].textContent;}
rowsArray.sort(compare);
alltable.removeChild(tbody);
for (var i = 0; i < rowsArray.length; i++) {
tbody.appendChild(rowsArray[i]);
}
alltable.appendChild(tbody);
}
этот код вроде должен сортировать строки по строковому значению 3-й ячейки. Сортирует странно - скажем значения на латинскую букву 'A' идут правильно, потом бац идёт несколько строк на 'C', 'S' и т.д. тоже в виде блоков. Какой-то закономерности не обнаружил. Сижу чешу репу, подозрение падает на return: rowA.cells[2].textContent > rowB.cells[2].textContent; На дурака смотрел alert'ом: sort пары берёт, правда как попало (ну да, конечно ни как попало; знаю, что это фича sort в javascript). А вот как проверить правильность сортировки каждого шага, мож чё и увижу? |
atanov,
в compare напишите полноценный вариант условий |
рони,
Не врубаюсь, а чё туда добавить-то? Вроде там только латинские букавы... Или я не прав, что этого: rowA.cells[2].textContent > rowB.cells[2].textContent; недостаточно? |
atanov,
свой-порядок-сортировки |
Сортировка строк по индексу ячейки (возрастание/убывание)
atanov,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<table width="400" id="alltable" >
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1.1</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>C</td>
<td>C</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>A</td>
<td>A</td>
</tr>
</tbody>
</table>
<script>
function sorttable(table, index, up) {
var tbody = table.querySelector("tbody");
var rowsArray = [].slice.call(tbody.rows);
var compare = function compareNumeric(a, b) {
a = a.cells[index].textContent.trim();
b = b.cells[index].textContent.trim();
if (a > b) {
return up ? 1 : -1;
}
if (a < b) {
return up ? -1 : 1;
}
};
var temp = document.createDocumentFragment();
rowsArray.sort(compare).forEach(function(a) {
temp.appendChild(a);
});
tbody.appendChild(temp);
}
;
var table = document.querySelector("#alltable");
sorttable (table, 2,true)
</script>
</body>
</html>
|
рони,
Спасибо большое. Но наверное я неправильно объяснил. У меня не цифры, а текст латиницей. Ведь Ваш код и код по ссылке именно с цифрами оперируют? Ещё, для самообразования хотел помучить - у Вас есть укороченные записи (который я никак не могу заставить себя выучить), можно разжевать для нуба, что они возвращают из функции:
if (a > b) {
return up ? 1 : -1;
}
if (a < b) {
return up ? -1 : 1;
}
В довесок - Вы любитель обращаться к элементу DOM через querySelector, вот так:
var tbody = table.querySelector("tbody");
Есть ли рациональное объяснение почему так лучше, чем обращение по id? Ну и напоследок - восхищение использованием createDocumentFragment()! |
Цитата:
что они возвращают из функции 1 или -1 или 0 если up == true и -1, 1, 0 если up == false или не указан. вариант использования sorttable (table, 2,true) // сортировка по возрастанию содержимого третьей ячейки sorttable (table, 2) или sorttable (table, 2,false) // сортировка по убыванию содержимого третьей ячейки document.getElementById() быстрее querySelector, но id редко когда действительно необходимо. |
| Часовой пояс GMT +3, время: 22:45. |