Как отсортировать таблицу по возрастанию/убыванию

@inquisitor · Регистрация: 22.12.2015

Студворк — интернет-сервис помощи студентам

В таблице есть несколько столбцов. Заполняется случайным образом на JS.
Нужно отсортировать всю по столбцу2 (убывания/возрастание)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<table>
<tbody>
<tr>
<td>Название</td>
<td>Столбец2</td>
<td>Столбец3</td>
<td>Столбец4</td>
<td>Столбец5</td>
</tr>
<tr>
<td>x1</td>
<td>25</td>
<td>15</td>
<td>33</td>
<td>55</td>
</tr>
<tr>
<td>x2</td>
<td>7</td>
<td>88</td>
<td>43</td>
<td>1</td>
</tr>
<tr>
<td>x3</td>
<td>65</td>
<td>72</td>
<td>13</td>
<td>35</td>
</tr>
<tr>
<td>x4</td>
<td>90</td>
<td>38</td>
<td>69</td>
<td>22</td>
</tr>
</tbody>
</table>

Добавлено через 4 минуты
вот таблица

@Freeze_Breeze · 29.05.2018, 21:49

scherbakovss201, почитайте про сортировку пузырьком (Buble-sort) и сортировку выбором(Selection-sort)

Qwerty_Wasd · 30.05.2018, 02:31

scherbakovss201, как вариант(html маленько изменил) - https://codepen.io/qwerty_wasd/pen/VdwBPz

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<table>
  <thead>
    <tr>
      <th>Название</th>
      <th>Столбец2</th>
      <th>Столбец3</th>
      <th>Столбец4</th>
      <th>Столбец5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>x1</td>
      <td>25</td>
      <td>15</td>
      <td>33</td>
      <td>55</td>
    </tr>
    <tr>
      <td>x2</td>
      <td>7</td>
      <td>88</td>
      <td>43</td>
      <td>1</td>
    </tr>
    <tr>
      <td>x3</td>
      <td>65</td>
      <td>72</td>
      <td>13</td>
      <td>35</td>
    </tr>
    <tr>
      <td>x4</td>
      <td>90</td>
      <td>38</td>
      <td>69</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
let table=document.querySelector('table'), tbody=document.querySelector('tbody'),rowsArray = [].slice.call(table.rows),compare,flag=true;
table.addEventListener('click',function(e){
  if(e.target==document.querySelector('th:nth-child(2)')){    
    if (flag) {compare = (rowA, rowB) => rowB.cells[e.target.cellIndex].innerHTML - rowA.cells[e.target.cellIndex].innerHTML;flag=!flag} else {compare = (rowA, rowB) => rowA.cells[e.target.cellIndex].innerHTML - rowB.cells[e.target.cellIndex].innerHTML;flag=!flag}
    rowsArray.sort(compare);
    table.removeChild(tbody);
    for (let i = 0; i < rowsArray.length; i++) tbody.appendChild(rowsArray[i]);
    table.appendChild(tbody);
  }
})

@inquisitor · 30.05.2018, 04:20 **[ТС]**

Сообщение от Qwerty_Wasd

scherbakovss201, как вариант(html маленько изменил)

у меня две таблицы
и обе с тегом table
по этому нужно через айдишник.

@diadiavova · 30.05.2018, 05:46

scherbakovss201, сортировку можно выполнить так

JavaScript
1
2
3
4
5
6
7
8
        function sortRows(table, columnNumber, asc = true)
        {
            Array.from(table.rows).slice(1)
                .sort((r1, r2) =>
                    (+(r2.cells[columnNumber].textContent)
                        - (r1.cells[columnNumber].textContent)) * (asc ? -1 : 1))
                .forEach(r => table.tBodies[0].appendChild(r));
        }

Здесь функция принимает таблицу, номер колонки по которому надо сортировать и направление. Подписать таблицу на клики по верхней строке, чтобы сортировалась соответствующая колонка, можно так

JavaScript
1
2
3
4
5
document.querySelector("table").rows[0].addEventListener("click", function (evt)
        {
            sortRows(evt.target.parentElement.parentElement.parentElement,
                evt.target.cellIndex, evt.target.asc = !(evt.target.asc))
        });

Если таблиц много, то обойди их в цикле и каждую так подпиши. Что-то типа такого

JavaScript
1
2
3
4
5
6
7
8
        for (let table of [table1, table2, table3])
        {
            table.rows[0].addEventListener("click", function (evt)
            {
                sortRows(evt.target.parentElement.parentElement.parentElement,
                    evt.target.cellIndex, evt.target.asc = !(evt.target.asc))
            });
        }

Qwerty_Wasd · 30.05.2018, 12:10

Сообщение от scherbakovss201

по этому нужно через айдишник.

ну и в чем проблема?

JavaScript
1
2
3
4
5
6
7
8
9
10
let table=document.getElementById('idTable'), tbody=document.querySelector('#idTable>tbody'),rowsArray = [].slice.call(table.rows),compare,flag=true;
table.addEventListener('click',function(e){
  if(e.target==document.querySelector('#idTable th:nth-child(2)')){    
    if (flag) {compare = (rowA, rowB) => rowB.cells[e.target.cellIndex].innerHTML - rowA.cells[e.target.cellIndex].innerHTML;flag=!flag} else {compare = (rowA, rowB) => rowA.cells[e.target.cellIndex].innerHTML - rowB.cells[e.target.cellIndex].innerHTML;flag=!flag}
    rowsArray.sort(compare);
    table.removeChild(tbody);
    for (let i = 0; i < rowsArray.length; i++) tbody.appendChild(rowsArray[i]);
    table.appendChild(tbody);
  }
})

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<table id="idTable">
  <thead>
    <tr>
      <th>Название</th>
      <th>Столбец2</th>
      <th>Столбец3</th>
      <th>Столбец4</th>
      <th>Столбец5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>x1</td>
      <td>25</td>
      <td>15</td>
      <td>33</td>
      <td>55</td>
    </tr>
    <tr>
      <td>x2</td>
      <td>7</td>
      <td>88</td>
      <td>43</td>
      <td>1</td>
    </tr>
    <tr>
      <td>x3</td>
      <td>65</td>
      <td>72</td>
      <td>13</td>
      <td>35</td>
    </tr>
    <tr>
      <td>x4</td>
      <td>90</td>
      <td>38</td>
      <td>69</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

https://codepen.io/qwerty_wasd/pen/VdwBPz

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	29.05.2018, 21:49
	scherbakovss201, почитайте про сортировку пузырьком (Buble-sort) и сортировку выбором(Selection-sort) 0

Как отсортировать таблицу по возрастанию/убыванию

Решение