我使用下面的代碼對我的網站LBRYnomics上的表格進行排序。它在排序時排除表標題，但我還想排除以紅色突出顯示的表第一列（頻道排名）。有沒有辦法做到這一點？很感謝任何形式的幫助。謝謝！當前代碼：const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;const comparer = (idx, asc) => (a, b) => ((v1, v2) => (v1 === null) - (v2 === null) || (isFinite(v1) && isFinite(v2) ?v1 - v2 : v1.toString().localeCompare(v2))) (getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {const table = th.closest('table');Array.from(table.querySelectorAll('tr:nth-child(n+2)')).sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc)).forEach(tr => table.appendChild(tr));})));
1 回答
LEATH
TA貢獻1936條經驗 獲得超7個贊
如果您只想使用 HTML/CSS 來完成此操作，或者讓該列獨立運行，則必須創建兩個內聯表并將它們并排放置，一個用于排名，另一個用于數據。想必并不難做到。
否則這是不可能的，因為td.rank子元素包含在tr元素內，重新排列 的位置將在層次結構中tr移動。 如果您想要更靈活的東西，您可以使用 css flex-grid 并模擬表格，而不受表格行結構所需的元素層次結構的約束。td
兩種涉及按順序替換的方法。
將 s 文本替換td.rank為連續數字 1-200。還可以使用.childNodes[0]
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => ((v1, v2) => (v1 === null) - (v2 === null) || (isFinite(v1) && isFinite(v2) ?
v1 - v2 : v1.toString().localeCompare(v2))) (getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach((tr,i) => {tr.querySelector('.rank').innerText=i+1+'';table.appendChild(tr)});
})));
將 s存儲td.rank在數組中，并按順序替換該行。
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => ((v1, v2) => (v1 === null) - (v2 === null) || (isFinite(v1) && isFinite(v2) ?
v1 - v2 : v1.toString().localeCompare(v2))) (getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
const col1 = table.querySelectorAll('.rank:nth-child(n+2)');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach((tr,i) => {
tr.replaceChild(col1[i],tr.childNodes[0]);
table.appendChild(tr);
});
})));
- 1 回答
- 0 關注
- 100 瀏覽
添加回答
舉報
0/150
提交
取消