HTML — Как отсортировать таблицу на основе каждой второй строки, используя прямой JavaScript

Как отсортировать таблицу на основе каждой второй строки, используя прямой JavaScript

Я пытаюсь отсортировать таблицу, в которой есть строка данных с несколькими полями, за которой следует строка данных, связанная с предыдущей строкой, но это длинное поле данных, которое охватывает все столбцы.

Это работало отлично, пока мне не пришлось добавить дополнительную строку данных между другими строками.

Я попытался изменить приращение и переместиться, но я не могу полностью указать на логику, чтобы отсортировать все остальные строки, а затем одновременно переместить эту строку (строку сортировки данных) И следующую строку (расширенную строку данных).

Базовая раскладка стола

 {amp}lt;table class="tableCSS" id="myTable" padding="1" spacing="1" width="100%"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th onclick="sortTable(0)"{amp}gt;{amp}lt;u{amp}gt;Field 1{amp}lt;/u{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th onclick="sortTable(1)"{amp}gt;{amp}lt;u{amp}gt;Field 1{amp}lt;/u{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th onclick="sortTable(2)"{amp}gt;{amp}lt;u{amp}gt;Field 1{amp}lt;/u{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th onclick="sortTable(3)"{amp}gt;{amp}lt;u{amp}gt;Field 1{amp}lt;/u{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th onclick="sortTable(4)"{amp}gt;{amp}lt;u{amp}gt;Field 1{amp}lt;/u{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th onclick="sortTable(5)"{amp}gt;{amp}lt;u{amp}gt;Field 1{amp}lt;/u{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Data1-1{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data1-2{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data1-3{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data1-4{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data1-5{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data1-6{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Long formatted data 1{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Data2-1{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data2-2{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data2-3{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data2-4{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data2-5{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Data2-6{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Long formatted data 2{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; 

Функция сортировки

 function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.rows; for (i = 1; i {amp}lt; (rows.length - 2); i  = 2) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i   2].getElementsByTagName("TD")[n]; if (dir == "asc") { if (x.innerHTML.toLowerCase() {amp}gt; y.innerHTML.toLowerCase()) { // If so, mark as a switch and break the loop: shouldSwitch = true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() {amp}lt; y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i   2], rows[i]); rows[i].parentNode.insertBefore(rows[i   2], rows[i 1]); switching = true; switchcount   ; } else { if (switchcount == 0 {amp}amp;{amp}amp; dir == "asc") { dir = "desc"; switching = true; } } } } {amp}lt;/script{amp}gt; 

Я получал разные результаты с разными итерациями кода, но если он выполняет сортировку, кажется, что строка расширенных данных помещается до, после или где-то еще целиком.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector