On the site http://pta-ua.com/ added a second rating (there used to be one) and the settings went away. Now only the one that I added is working, but the old one is not. When you click on "Show full rating" in the first rating, the second one opens.

<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>

This is the table you added, and below is the table that was

 <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>

Here is the js code that I have. I need the second table to function in the same way as the first

  $(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 = 'Показать всё'; } });

    1 answer 1

    Just because copying the code does not give the desired result. You have two tables, and links to the same buttons, etc. You need to separate the logic so that JS understands what needs to be updated by clicking on one or another button. Something like this, only it is better to name the variables normally so that it would be easier for you to work with this code later. 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