第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

楊__羊羊 2022-06-09 19:28:08
我使用下面的代碼對我的網(wǎng)站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 回答

?
ABOUTYOU

TA貢獻1812條經(jīng)驗 獲得超5個贊

如果您只想使用 HTML/CSS 執(zhí)行此操作，或者讓該列獨立運行，則必須創(chuàng)建兩個內(nèi)聯(lián)表并將它們并排放置，一個用于排名，一個用于您的數(shù)據(jù)。做起來大概不難。

否則這是不可能的，因為td.rank它是一個包含在元素中的子tr元素，并且重新排列的位置將在層次結(jié)構(gòu)中tr移動它。 如果您想要更靈活的東西，您可以使用 css flex-grid 并模擬表格，而不受表格行結(jié)構(gòu)所需的元素層次結(jié)構(gòu)的約束。td


涉及按順序替換的兩種方法。


td.rank用序號 1-200替換s 文本。也可以使用.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在一個數(shù)組中，并按順序替換該行。


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

});

})));


查看完整回答
反對 回復 2022-06-09
  • 1 回答
  • 0 關注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號