javascript - 使用Javascript对同一函数中的两个表进行排序
问题描述
我需要在同一个函数中对这两个表进行排序。当我单击第一个表中的名称时,它也会按名称对第二个表进行排序。
我有这个功能可以对表格进行排序并且它正在工作,但它只能对一个表格进行排序。
对两个表进行排序需要哪些更改?
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>
解决方案
您可以为每个表运行 sortTable 函数。
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>
推荐阅读
- continuous-integration - 如何避免“此管道没有阶段/作业”。在 GitLab CI
- python - 值类型错误 Python3:只能连接元组
- flutter - 当我使用 facebook flutter 登录时出现“FacebookLoginStatus.error”
- database - 出现错误:错误状态:无法获取 DocumentSnapshotPlatform 上不存在的字段
- jprofiler - JProfiler:为什么代理类不显示在调用树中?
- javascript - 如何在不滚动的情况下按下按钮上下移动
- javascript - 我想用相同的按键操作按顺序交替执行不同的操作过程
- python - 列表包含具有相同值的数组
- laravel - 将 aws-s3-v3 与 laravel 和 digitalocean 空间一起使用会导致错误 501 未实现
- c# - UWP 项目导航