你能阻止表格的第一列排序吗？

Question

我使用以下代码对我的网站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));
})));

Answer 1

如果您只想使用 HTML/CSS 完成此操作，或者让该列独立运行，则必须创建两个内联表并将它们并排放置，一个用于排名，另一个用于您的数据。 大概不难做到。
这是不可能的，因为td.rank是包含在tr元素中的子元素，重新排列tr的位置将在层次结构中移动td 。
如果您想要更灵活的东西，您可以使用 css flex-grid 并模拟表格，而不受表格行结构所需的元素层次结构的约束。

涉及按顺序替换的两种方法。

用序列号 1-200 替换td.rank的文本。 也可以使用.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)});
})));

将td.rank 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);
});
})));