На сайте http://pta-ua.com/ добавил второй рейтинг(раньше был один) и слетели настройки. Теперь работает только тот, который я добавил, а старый - нет. При нажатии на "Показать весь рейтинг" в первом рейтинге, открывается второй.
<div class="table2">
<h3 class="h3">Парный рейтинг</h3>
<table id ="myTable1" class="tablesorter tablesorter1">
<thead>
<tr>
<th>№</th>
<th>Фамилия Имя</th>
<th class="header headerSortUp">Очки</th>
</tr>
</thead>
<tbody class="selected">
<tr>
<td>1</td>
<td>Мацюк Александр</td>
<td>524</td>
</tr>
<tr>
<td>2</td>
<td>Мурзин Максим</td>
<td>119</td>
</tr>
<tr>
<td>3</td>
<td>Тюков Владимир</td>
<td>263</td>
</tr>
<tr>
<td>4</td>
<td>Гаврилов Константин</td>
<td>261</td>
</tr>
<tr>
<td>5</td>
<td>Кутя Сергей</td>
<td>148</td>
</tr>
<tr>
<td>6</td>
<td>Кислань Елизавета</td>
<td>195</td>
</tr>
<tr>
<td>7</td>
<td>Моисеенко Александр</td>
<td>546</td>
</tr>
<tr>
<td>8</td>
<td>Краснов Денис</td>
<td>110</td>
</tr>
<tr>
<td>9</td>
<td>Кислань Сергей</td>
<td>341</td>
</tr>
<tr>
<td>10</td>
<td>Кулага Илья</td>
<td>276</td>
</tr>
</tbody>
</table>
<!--ТАБЛИЦА ЗАКНОЧИЛАСЬ-->
<a id="showAll1">Показать весь рейтинг</a>
</div>
Это таблица которую добавил, а ниже таблица, которая была
<div id="rating" class="rating">
<h3 class="h3">Одиночный рейтинг</h3>
<!--НАЧИНАЕТСЯ ТАБЛИЦА-->
<table id ="myTable" class="tablesorter">
<thead>
<tr>
<th>№</th>
<th>Фамилия Имя</th>
<th class="header headerSortUp">Очки</th>
</tr>
</thead>
<tbody class="selected">
<tr>
<td>1</td>
<td>Мацюк Александр</td>
<td>524</td>
</tr>
<tr>
<td>2</td>
<td>Мурзин Максим</td>
<td>119</td>
</tr>
<tr>
<td>3</td>
<td>Тюков Владимир</td>
<td>263</td>
</tr>
<tr>
<td>4</td>
<td>Гаврилов Константин</td>
<td>261</td>
</tr>
<tr>
<td>5</td>
<td>Кутя Сергей</td>
<td>148</td>
</tr>
<tr>
<td>6</td>
<td>Кислань Елизавета</td>
<td>195</td>
</tr>
<tr>
<td>7</td>
<td>Моисеенко Александр</td>
<td>546</td>
</tr>
<tr>
<td>8</td>
<td>Краснов Денис</td>
<td>110</td>
</tr>
<tr>
<td>9</td>
<td>Кислань Сергей</td>
<td>341</td>
</tr>
<tr>
<td>10</td>
<td>Кулага Илья</td>
<td>276</td>
</tr>
<tr>
</tbody>
</table>
<!--ТАБЛИЦА ЗАКНОЧИЛАСЬ-->
<a id="showAll">Показать весь рейтинг</a>
</div>
Вот js код который у меня. Мне нужно, что бы вторая таблица функционировала точно так же, как и первая
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[2,1], [0,0]]} );
$("#myTable").tablesorter( {debug:false} );
$('table').tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} } });
}
);
$(function() {
// add new widget called indexFirstColumn
$.tablesorter.addWidget({
// give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function(table) {
// loop all tr elements and set the value for the first column
for(var i=0; i < table.tBodies[0].rows.length; i++) {
$("tbody tr:eq(" + i + ") td:first",table).html(i+1);
}
}
});
$("table").tablesorter({
widgets: ['zebra','indexFirstColumn']
});
var button = document.getElementById('showAll');
table = document.getElementById('myTable');
button.addEventListener('click', function() {
// Проверяем на наличие класса и вызываем соответсвуюущую функцию
table.classList.contains('opened') ? hideRows() : showRows();
});
function showRows() {
table.classList.add('opened');
button.innerHTML = 'Скрыть';
}
function hideRows() {
table.classList.remove('opened');
button.innerHTML = 'Показать весь рейтинг';
}
var button = document.getElementById('showAll1');
table = document.getElementById('myTable1');
button.addEventListener('click', function() {
// Проверяем на наличие класса и вызываем соответсвуюущую функцию
table.classList.contains('opened') ? hideRows() : showRows();
});
function showRows() {
table.classList.add('opened');
button.innerHTML = 'Скрыть';
}
function hideRows() {
table.classList.remove('opened');
button.innerHTML = 'Показать всё';
}
});
Просто так копирование кода не даст желаемого результата. У вас две таблицы, а ссылки на одни и те же кнопки и т.д. Вам надо разделить логику чтоб JS понимал что именно надо обновить по клику на ту или другую кнопку. Примерно так, только лучше нормально назовите переменные, чтоб легче было потом с этим кодом вам же работать. https://codepen.io/Lukyanenko/pen/zmNWvK?editors=1010
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[2,1], [0,0]]} );
$("#myTable").tablesorter( {debug:false} );
$('table').tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} } });
}
);
$(function() {
// add new widget called indexFirstColumn
$.tablesorter.addWidget({
// give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function(table) {
// loop all tr elements and set the value for the first column
for(var i=0; i < table.tBodies[0].rows.length; i++) {
$("tbody tr:eq(" + i + ") td:first",table).html(i+1);
}
}
});
$("table").tablesorter({
widgets: ['zebra','indexFirstColumn']
});
var button = document.getElementById('showAll');
var table = document.getElementById('myTable');
button.addEventListener('click', function() {
// Проверяем на наличие класса и вызываем соответсвуюущую функцию
console.log(table.classList.contains('opened'))
table.classList.contains('opened') ? hideRows() : showRows();
});
function showRows() {
table.classList.add('opened');
button.innerHTML = 'Скрыть';
}
function hideRows() {
table.classList.remove('opened');
button.innerHTML = 'Показать весь рейтинг';
}
var button2 = document.getElementById('showAll1');
var table2 = document.getElementById('myTable1');
button2.addEventListener('click', function() {
// Проверяем на наличие класса и вызываем соответсвуюущую функцию
table2.classList.contains('opened') ? hideRows2() : showRows2();
});
function showRows2() {
table2.classList.add('opened');
button2.innerHTML = 'Скрыть';
}
function hideRows2() {
table2.classList.remove('opened');
button2.innerHTML = 'Показать всё';
}
});
[1]: h
Существуют ли какой либо стандартный Event на удаление исчезновение элемента из DOMЧто-то типа:
Сильно ли пострадает оптимизация от такого кода?