denis_kontarev,
<!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: "▲"
}
tfoot.hide{
display: none;
}
.spoiler-trigger + div {
display: none;
}
.spoiler-trigger.open + div {
display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const table = document.querySelector('.tsort');
const ArrayTfoot = [...table.querySelectorAll('tfoot')];
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.querySelector('tr').children[index].innerHTML,
b.querySelector('tr').children[index].innerHTML);
ArrayTfoot.sort(comparator(index, order));
table.append(...ArrayTfoot);
for (const cell of target.parentNode.cells)
cell.classList.toggle("sorted", cell === target);
};
document.querySelector('.tsort thead').addEventListener('click', getSort);
const inputFilter = document.querySelector('#teams_filter');
inputFilter.addEventListener('input', () => ArrayTfoot.forEach(tfoot => {
const text = tfoot.textContent.toLowerCase(),
val = inputFilter.value.trim().toLowerCase(),
hide = val && text.indexOf(val) === -1;
tfoot.classList.toggle('hide', hide)
}))
document.addEventListener('click', event => {
const target = event.target.closest('.spoiler-trigger');
if(target) {
event.preventDefault();
target.classList.toggle('open')
}
})
})
</script>
</head>
<body>
<input type="text" id="teams_filter" placeholder="Поиск по таблице">
<table class="proanaliz-table tsort" id="table_search">
<thead>
<tr>
<th class="sort">Начало</th>
<th class="sort">Команды</th>
<th class="sort">1</th>
<th class="sort">X</th>
<th class="sort">2</th>
<th class="sort">TIP</th>
</tr>
</thead>
<tfoot>
<tr>
<td>01:00</td>
<td>>Спортиво Лукеньо - Депортиво Сантани</td>
<td>2.63</td>
<td>3.24</td>
<td>2.99</td>
</tr>
<tr>
<td colspan="6">
<a href="#" class="spoiler-trigger"><span>Открыть подробную информацию</span></a>
<div class="spoiler-block">
<table class="proanaliz-table">
<tr>
<td>04:00</td>
<td>>Палмейрас - ЦСА</td>
<td>1.19</td>
<td>2.56</td>
<td>3.98</td>
</tr>
</table>
</div>
</td>
</tr>
</tfoot>
<tfoot>
<tr>
<td>08:00</td>
<td>>индия</td>
<td>2.63</td>
<td>3.24</td>
<td>2.99</td>
</tr>
<tr>
<td colspan="6">
<a href="#" class="spoiler-trigger"><span>Открыть подробную информацию</span></a>
<div class="spoiler-block">
<table class="proanaliz-table">
<tr>
<td>04:00</td>
<td>>Палмейрас - ЦСА</td>
<td>1.19</td>
<td>2.56</td>
<td>3.98</td>
</tr>
</table>
</div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>