I need to sort these two tables in the same function. When I click name in first table so it will sort second table also by name.
I have this function where can sort table and it is working, but it only sorts one table.
What changes are needed to sort both tables?
function sortTable(table, column, asc = true) { const dirModifier = asc ? 1 : -1; const tBody = table.tBodies[0]; const rows = Array.from(tBody.querySelectorAll("tr")); const sortedRows = rows.sort((a, b) => { const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim(); const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim(); return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier); }); while (tBody.firstChild) { tBody.removeChild(tBody.firstChild); } tBody.append(...sortedRows); table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc")); table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc); table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc); } document.querySelectorAll(".table-sortable th").forEach(headerCell => { headerCell.addEventListener("click", () => { const tableElement = headerCell.parentElement.parentElement.parentElement; const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell); const currentIsAscending = headerCell.classList.contains("th-sort-asc"); sortTable(tableElement, headerIndex, !currentIsAscending); }); });
<table class="table-sortable"> <thead> <tr> <th>name</th> <th>adress</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>Oslo</td> <td>35</td> </tr> <tr> <td>Per</td> <td>London</td> <td>29</td> </tr> <tr> <td>Hary</td> <td>Madrid</td> <td>30</td> </tr> </tbody> </table> <table class="table-sortable"> <thead> <tr> <th>name</th> <th>adress</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>Oslo</td> <td>35</td> </tr> <tr> <td>Per</td> <td>London</td> <td>29</td> </tr> <tr> <td>Hary</td> <td>Madrid</td> <td>30</td> </tr> </tbody> </table>
Advertisement
Answer
You can run sortTable function for each table.
var tables =document.getElementsByClassName("table-sortable"); sortTable(tables[0], headerIndex, !currentIsAscending); sortTable(tables[1], headerIndex, !currentIsAscending);
function sortTable(table, column, asc = true) { const dirModifier = asc ? 1 : -1; const tBody = table.tBodies[0]; const rows = Array.from(tBody.querySelectorAll("tr")); const sortedRows = rows.sort((a, b) => { const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim(); const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim(); return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier); }); while (tBody.firstChild) { tBody.removeChild(tBody.firstChild); } tBody.append(...sortedRows); table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc")); table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc); table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc); } document.querySelectorAll(".table-sortable th").forEach(headerCell => { headerCell.addEventListener("click", () => { const tableElement = headerCell.parentElement.parentElement.parentElement; const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell); const currentIsAscending = headerCell.classList.contains("th-sort-asc"); var tables =document.getElementsByClassName("table-sortable"); sortTable(tables[0], headerIndex, !currentIsAscending); sortTable(tables[1], headerIndex, !currentIsAscending); }); });
<table class="table-sortable"> <thead> <tr> <th>name</th> <th>adress</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>Oslo</td> <td>35</td> </tr> <tr> <td>Per</td> <td>London</td> <td>29</td> </tr> <tr> <td>Hary</td> <td>Madrid</td> <td>30</td> </tr> </tbody> </table> <table class="table-sortable"> <thead> <tr> <th>name</th> <th>adress</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>Oslo</td> <td>35</td> </tr> <tr> <td>Per</td> <td>London</td> <td>29</td> </tr> <tr> <td>Hary</td> <td>Madrid</td> <td>30</td> </tr> </tbody> </table>