denis_kontarev,
вариант на основе кода от
Malleys https://codepen.io/Malleys/pen/dQGMbP?editors=0010
https://javascript.ru/forum/misc/758...tml#post498107
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700');
body {
font-family: Roboto;
}
table {
border-collapse: collapse
}
td, th {
border: 2px solid red;
width: 150px;
height: 40px;
text-align: center;
}
th {
cursor: pointer;
user-select: none;
}
th.sorted[data-order="-1"]::after {
content: "▼"
}
th.sorted[data-order="1"]::after {
content: "▲"
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const getSort = ({ target }) => {
const order = target.dataset.order = -(target.dataset.order || -1);
const index = [...target.parentNode.cells].indexOf(target);
const collator = new Intl.Collator(["en", "ru"], { numeric: true });
const comparator = (index, order) => (a, b) => order * collator.compare(
a.children[index].innerHTML,
b.children[index].innerHTML);
const tBody = target.closest("table").tBodies[0];
let trs = [...tBody.rows].filter((el, i) => i % 2 == 0);
trs.sort(comparator(index, order));
trs.forEach(el => {
const next = el.nextElementSibling;
tBody.append(...[el,next])
});
for (const cell of target.parentNode.cells)
cell.classList.toggle("sorted", cell === target);
};
document.querySelector('.tsort thead').addEventListener('click', getSort)
})
</script>
</head>
<body>
<table class="tsort">
<thead>
<tr>
<th>Начало</th>
<th>Команды</th>
<th>1</th>
<th>X</th>
<th>2</th>
<th>TIP</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:30</td>
<td>Боливия</td>
<td>1.69</td>
<td>3.74</td>
<td>4.12</td>
</tr>
<tr>
<td>
<a href="#" class="spoiler-trigger"><span>Открыть подробную информацию боливия</span></a>
<div class="spoiler-block">
<table>
<tbody>
<tr>
<td>Ф(-1)</td>
<td>Ф(+1)</td>
</tr>
<tr>
<td>1</td>
<td>X</td>
<td>2</td>
<td>1</td>
<td>X</td>
<td>2</td>
</tr>
<tr>
<td>2.62</td>
<td>4.00</td>
<td>2.00</td>
</tr>
</tbody>
</table>
</tr>
<tr>
<td>00:50</td>
<td>Индия</td>
<td>0.69</td>
<td>63.74</td>
<td>2.12</td>
</tr>
<tr>
<td>
<a href="#" class="spoiler-trigger"><span>Открыть подробную информацию индия</span></a>
<div class="spoiler-block">
<table>
<tbody>
<tr>
<td>Ф(-1)</td>
<td>Ф(+1)</td>
</tr>
<tr>
<td>1</td>
<td>X</td>
<td>2</td>
<td>1</td>
<td>X</td>
<td>2</td>
</tr>
<tr>
<td>2.62</td>
<td>4.00</td>
<td>2.00</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
</body>
</html>