☰

Resizable Table Columns & Replace Link Text

Let user resize table columns by dragging the header edges & replace anchor text with its title attribute

当前为 2025-02-22 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Resizable Table Columns & Replace Link Text
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.0
  5. // @author       aspen138
  6. // @description  Let user resize table columns by dragging the header edges & replace anchor text with its title attribute
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Insert some CSS for the column "grip" that we'll add to each header
  16.     const style = document.createElement('style');
  17.     style.textContent = `
  18.       .column-resize-grip {
  19.         position: absolute;
  20.         top: 0;
  21.         right: 0;
  22.         width: 6px;       /* Thicker area for easier dragging */
  23.         height: 100%;
  24.         cursor: col-resize;
  25.         user-select: none;
  26.       }
  27.       th.resizable-header {
  28.         position: relative;
  29.       }
  30.     `;
  31.     document.head.appendChild(style);
  32.  
  33.     /**
  34.      * Attach grips to each table header so we can drag the column widths.
  35.      * @param {HTMLTableElement} table  A table element to attach resizing.
  36.      */
  37.     function makeColumnsResizable(table) {
  38.         const headers = table.querySelectorAll('th');
  39.         if (!headers.length) return;
  40.  
  41.         headers.forEach((header) => {
  42.             header.classList.add('resizable-header');
  43.             // Avoid adding multiple grips if script runs again
  44.             if (header.querySelector('.column-resize-grip')) return;
  45.  
  46.             const grip = document.createElement('div');
  47.             grip.className = 'column-resize-grip';
  48.             header.appendChild(grip);
  49.  
  50.             grip.addEventListener('mousedown', startDragging);
  51.         });
  52.  
  53.         function startDragging(event) {
  54.             event.preventDefault();
  55.             event.stopPropagation();
  56.  
  57.             const headerEl = event.target.parentElement;
  58.             const startX = event.clientX;
  59.             const startWidth = headerEl.offsetWidth;
  60.  
  61.             document.addEventListener('mousemove', onDrag);
  62.             document.addEventListener('mouseup', stopDragging);
  63.  
  64.             function onDrag(e) {
  65.                 const dx = e.clientX - startX;
  66.                 headerEl.style.width = `${startWidth + dx}px`;
  67.             }
  68.  
  69.             function stopDragging() {
  70.                 document.removeEventListener('mousemove', onDrag);
  71.                 document.removeEventListener('mouseup', stopDragging);
  72.             }
  73.         }
  74.     }
  75.  
  76.     /**
  77.      * Replace the truncated link text with its full "title" attribute.
  78.      * @param {HTMLTableElement} table A table element containing anchors with a title attribute.
  79.      */
  80.     function replaceLinkTextWithTitle(table) {
  81.         const anchors = table.querySelectorAll('a[title]');
  82.         anchors.forEach(anchor => {
  83.             anchor.textContent = anchor.getAttribute('title');
  84.         });
  85.     }
  86.  
  87.     window.addEventListener('load', function() {
  88.         // Modify the selector below to match your table's selector
  89.         const table = document.querySelector('.t-tablelist');
  90.         if (table) {
  91.             makeColumnsResizable(table);
  92.             replaceLinkTextWithTitle(table);
  93.         }
  94.     });
  95. })();