table-sorter

强制排序表格

  1. // ==UserScript==
  2. // @name table-sorter
  3. // @namespace https://gf.qytechs.cn/
  4. // @version 0.1.0
  5. // @description 强制排序表格
  6. // @author HqLin
  7. // @match https://*/*
  8. // @license AGPLv3
  9. // ==/UserScript==
  10. 'use strict';
  11.  
  12. (function () {
  13. document.querySelectorAll('table').forEach((tbl) => {
  14. const trows = Array.from(tbl.querySelectorAll('tbody tr'))
  15. const theads = tbl.querySelectorAll('th')
  16. const thead = theads?.[0]?.parentElement
  17. const trueHeader = !!tbl.querySelector('thead')
  18.  
  19. if (trows.length === 0 || theads.length === 0 || !thead) return
  20. if (!trueHeader) trows.shift()
  21.  
  22. theads.forEach((head, idx) => head.dataset.index = idx)
  23.  
  24. let sortingIdx = 0, reverse = false, triggering = false
  25.  
  26. document.addEventListener('keydown', ev => triggering = ev.ctrlKey)
  27. document.addEventListener('keyup', _ => triggering = false)
  28. thead.addEventListener('click', (ev) => {
  29. if (!triggering) return
  30. const header = ev.target.closest('th')
  31. console.log('Sort by', triggering, sortingIdx, header.textContent)
  32. reverse = header.dataset.index === sortingIdx ? !reverse : false
  33. sortingIdx = header.dataset.index
  34. const tbody = tbl.querySelector('tbody')
  35. tbody.innerHTML = ''
  36. // 有的 table 把表头写在 tbody 里面
  37. if (!trueHeader) tbody.appendChild(thead)
  38. const trowsSorted = trows.sort((rowA, rowB) => {
  39. const cellA = rowA.querySelectorAll('td')[sortingIdx]?.textContent
  40. const cellB = rowB.querySelectorAll('td')[sortingIdx]?.textContent
  41. const delta = cellA - cellB
  42. return (reverse ? -1 : 1) * (Number.isNaN(delta) ? cellA.localeCompare(cellB) : delta)
  43. })
  44.  
  45. trowsSorted.forEach(row => tbody.appendChild(row))
  46. })
  47. })
  48. })()

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址