🏠 Home 

Keylol Table Sort

对keylol琪露诺折扣贴表格按价格或折扣排序


Install this script?
  1. // ==UserScript==
  2. // @name Keylol Table Sort
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.33
  5. // @description 对keylol琪露诺折扣贴表格按价格或折扣排序
  6. // @author 冰雪聪明琪露诺
  7. // @match https://keylol.com/*
  8. // @grant none
  9. // ==/UserScript==
  10. (function() {
  11. 'use strict';
  12. let optionsContainer;
  13. // 用于存储原始的表格行顺序
  14. let originalRows = [];
  15. const setupSort = () => {
  16. optionsContainer && optionsContainer.remove();
  17. const table = document.querySelector('.t_fsz table.t_table');
  18. if (!table) return;
  19. const priceHeader = [...table.rows[0].cells].find(cell => cell.textContent.includes('商店价格'));
  20. const reviewHeader = [...table.rows[0].cells].find(cell => cell.textContent.includes('游戏评价'));
  21. const nameHeader = [...table.rows[0].cells].find(cell => cell.textContent.includes('游戏名称'));
  22. if (!priceHeader || !reviewHeader || !nameHeader) return;
  23. // 存储原始行顺序
  24. originalRows = [...table.rows].slice(1);
  25. optionsContainer = document.createElement('div');
  26. Object.assign(optionsContainer.style, {
  27. position: 'absolute', display: 'none', background: 'white',
  28. border: '1px solid #ccc', padding: '5px', zIndex: 100
  29. });
  30. optionsContainer.className = 'keylol-sort-options';
  31. const priceIndex = [...table.rows[0].cells].findIndex(cell => cell.textContent.includes('商店价格'));
  32. const reviewIndex = [...table.rows[0].cells].findIndex(cell => cell.textContent.includes('游戏评价'));
  33. const nameIndex = [...table.rows[0].cells].findIndex(cell => cell.textContent.includes('游戏名称'));
  34. const createSortOptions = (header, options, index) => {
  35. let visible = false;
  36. header.addEventListener('click', e => {
  37. e.stopPropagation();
  38. if (visible) {
  39. optionsContainer.style.display = 'none';
  40. visible = false;
  41. } else {
  42. optionsContainer.innerHTML = '';
  43. options.forEach(option => {
  44. const opt = document.createElement('div');
  45. opt.textContent = option.text;
  46. opt.style.cssText = 'cursor: pointer; padding: 5px';
  47. opt.addEventListener('click', () => {
  48. sortTable(table, option.fn, index);
  49. optionsContainer.style.display = 'none';
  50. visible = false;
  51. });
  52. optionsContainer.appendChild(opt);
  53. });
  54. const { left, bottom } = header.getBoundingClientRect();
  55. const { pageXOffset, pageYOffset } = window;
  56. Object.assign(optionsContainer.style, { left: left + pageXOffset + 'px', top: bottom + pageYOffset + 'px', display: 'block' });
  57. visible = true;
  58. }
  59. });
  60. };
  61. const priceSortOptions = [
  62. { text: '按价格排序(升序)', fn: (a, b, idx) => parseFloat(a.cells[idx].textContent.match(/¥(\d+\.\d+)/)[1]) - parseFloat(b.cells[idx].textContent.match(/¥(\d+\.\d+)/)[1]) },
  63. { text: '按价格排序(降序)', fn: (a, b, idx) => parseFloat(b.cells[idx].textContent.match(/¥(\d+\.\d+)/)[1]) - parseFloat(a.cells[idx].textContent.match(/¥(\d+\.\d+)/)[1]) },
  64. { text: '按折扣排序(升序)', fn: (a, b, idx) => parseFloat(a.cells[idx].textContent.match(/-(\d+)%/)[1]) - parseFloat(b.cells[idx].textContent.match(/-(\d+)%/)[1]) },
  65. { text: '按折扣排序(降序)', fn: (a, b, idx) => parseFloat(b.cells[idx].textContent.match(/-(\d+)%/)[1]) - parseFloat(a.cells[idx].textContent.match(/-(\d+)%/)[1]) }
  66. ];
  67. const reviewSortOptions = [
  68. { text: '按好评率排序(升序)', fn: (a, b, idx) => {
  69. const ratingA = parseFloat(a.cells[idx].textContent.match(/(\d+)%/)[1]);
  70. const ratingB = parseFloat(b.cells[idx].textContent.match(/(\d+)%/)[1]);
  71. return ratingA === ratingB ?
  72. parseInt(a.cells[idx].textContent.match(/(\d+)篇/)[1]) - parseInt(b.cells[idx].textContent.match(/(\d+)篇/)[1]) :
  73. ratingA - ratingB;
  74. } },
  75. { text: '按好评率排序(降序)', fn: (a, b, idx) => {
  76. const ratingA = parseFloat(a.cells[idx].textContent.match(/(\d+)%/)[1]);
  77. const ratingB = parseFloat(b.cells[idx].textContent.match(/(\d+)%/)[1]);
  78. return ratingA === ratingB ?
  79. parseInt(b.cells[idx].textContent.match(/(\d+)篇/)[1]) - parseInt(a.cells[idx].textContent.match(/(\d+)篇/)[1]) :
  80. ratingB - ratingA;
  81. } },
  82. { text: '按评测数排序(升序)', fn: (a, b, idx) => parseInt(a.cells[idx].textContent.match(/(\d+)篇/)[1]) - parseInt(b.cells[idx].textContent.match(/(\d+)篇/)[1]) },
  83. { text: '按评测数排序(降序)', fn: (a, b, idx) => parseInt(b.cells[idx].textContent.match(/(\d+)篇/)[1]) - parseInt(a.cells[idx].textContent.match(/(\d+)篇/)[1]) }
  84. ];
  85. const nameSortOptions = [
  86. {
  87. text: '恢复默认排序',
  88. fn: (table) => {
  89. while (table.rows.length > 1) table.deleteRow(1);
  90. originalRows.forEach(row => table.appendChild(row));
  91. }
  92. },
  93. { text: '按名称排序(升序)', fn: (a, b, idx) => a.cells[idx].textContent.localeCompare(b.cells[idx].textContent) },
  94. { text: '按名称排序(降序)', fn: (a, b, idx) => b.cells[idx].textContent.localeCompare(a.cells[idx].textContent) }
  95. ];
  96. createSortOptions(priceHeader, priceSortOptions, priceIndex);
  97. createSortOptions(reviewHeader, reviewSortOptions, reviewIndex);
  98. createSortOptions(nameHeader, nameSortOptions, nameIndex);
  99. document.body.appendChild(optionsContainer);
  100. document.addEventListener('click', e => {
  101. optionsContainer && !optionsContainer.contains(e.target) && (optionsContainer.style.display = 'none');
  102. });
  103. };
  104. const sortTable = (table, sortFunction, index) => {
  105. if (sortFunction.length === 1) {
  106. // 如果是恢复默认排序
  107. sortFunction(table);
  108. } else {
  109. const rows = [...table.rows].slice(1);
  110. rows.sort((a, b) => sortFunction(a, b, index));
  111. while (table.rows.length > 1) table.deleteRow(1);
  112. rows.forEach(row => table.appendChild(row));
  113. }
  114. };
  115. document.body.addEventListener('click', e => {
  116. if (e.target.closest('.tindex li, div[style*="text-align: center;margin-top: 10px;"] a')) {
  117. setTimeout(setupSort, 1000);
  118. }
  119. });
  120. setTimeout(setupSort, 1000);
  121. })();