Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Сортировка таблецы по классу в TR (https://javascript.ru/forum/dom-window/83129-sortirovka-tablecy-po-klassu-v-tr.html)

Alexprom 23.09.2021 13:05

Сортировка таблецы по классу в TR
 
Здравствуйте! Поделитесь пожалуйста примером сортировки таблицы по классу в TR
Никак не могу найти чтобы все tr с классом поднимались в вверх...
Может есть у когото пример?

Вот моя таблица
<table class="table table-bordered" id="myTable">
<?php
foreach($pages as $item){
    ?>
	<tr<?php if(empty($item['description'])){?> class="alert-danger"<?php }?>>
	<td><?=$item['title']?></td>
	<td><?php if($item['language_id']==1){echo "RU";}else{echo "UK";}?></td>
	<td><?php if(!empty($item['description'])){echo "Текст додано";}else{echo "Текст відсутній";}?></td>
	</tr><?php
}
?>
</table>

voraa 23.09.2021 13:28

Где и когда они должны подниматься?
При генерации таблицы на сервере?
В браузере при загрузке страницы?
По команде пользователя во время просмотра страницы?

Alexprom 23.09.2021 13:39

Цитата:

Сообщение от voraa (Сообщение 540350)
Где и когда они должны подниматься?
При генерации таблицы на сервере?
В браузере при загрузке страницы?
По команде пользователя во время просмотра страницы?

При загрузке страницы. Некоторые TR имею класс, остальные не имеют. хочется чтобы те которые имеют, выводились в самый верх

voraa 23.09.2021 13:54

<body>
<table id=myTable>
<tr class=alert-danger><td>1</td><td>Class</td><tr>
<tr><td>2</td><td>No class</td><tr>
<tr><td>3</td><td>No class</td><tr>
<tr class=alert-danger><td>4</td><td>Class</td><tr>
<tr><td>5</td><td>No class</td><tr>
<tr class=alert-danger><td>6</td><td>Class</td><tr>
</table>
<script>
function dangerUp () {
  const tab = document.getElementById('myTable');
  const trnocl = tab.querySelector('tr:not(.alert-danger)'); // первая строка без класса
  if (!trnocl) return;
  const trscl = tab.querySelectorAll('tr.alert-danger'); // все строки с классом
  trnocl.before(...trscl);
}
dangerUp();
</script>
</body>

Alexprom 23.09.2021 14:01

Цитата:

Сообщение от voraa (Сообщение 540352)
<body>
<table id=myTable>
<tr class=alert-danger><td>1</td><td>Class</td><tr>
<tr><td>2</td><td>No class</td><tr>
<tr><td>3</td><td>No class</td><tr>
<tr class=alert-danger><td>4</td><td>Class</td><tr>
<tr><td>5</td><td>No class</td><tr>
<tr class=alert-danger><td>6</td><td>Class</td><tr>
</table>
<script>
function dangerUp () {
  const tab = document.getElementById('myTable');
  const trnocl = tab.querySelector('tr:not(.alert-danger)'); // первая строка без класса
  if (!trnocl) return;
  const trscl = tab.querySelectorAll('tr.alert-danger'); // все строки с классом
  trnocl.before(...trscl);
}
dangerUp();
</script>
</body>

Вау, то что нужно)))) БОльшое вам спасибо))):dance:
Жаль еще раз на рейтинг нажать не могу(


Часовой пояс GMT +3, время: 16:05.