☰

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-21 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Resizable Table Columns & Replace Link Text
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @author       aspen138
// @description  Let user resize table columns by dragging the header edges & replace anchor text with its title attribute
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Insert some CSS for the column "grip" that we'll add to each header
    const style = document.createElement('style');
    style.textContent = `
      .column-resize-grip {
        position: absolute;
        top: 0;
        right: 0;
        width: 6px;       /* Thicker area for easier dragging */
        height: 100%;
        cursor: col-resize;
        user-select: none;
      }
      th.resizable-header {
        position: relative;
      }
    `;
    document.head.appendChild(style);

    /**
     * Attach grips to each table header so we can drag the column widths.
     * @param {HTMLTableElement} table  A table element to attach resizing.
     */
    function makeColumnsResizable(table) {
        const headers = table.querySelectorAll('th');
        if (!headers.length) return;

        headers.forEach((header) => {
            header.classList.add('resizable-header');
            // Avoid adding multiple grips if script runs again
            if (header.querySelector('.column-resize-grip')) return;

            const grip = document.createElement('div');
            grip.className = 'column-resize-grip';
            header.appendChild(grip);

            grip.addEventListener('mousedown', startDragging);
        });

        function startDragging(event) {
            event.preventDefault();
            event.stopPropagation();

            const headerEl = event.target.parentElement;
            const startX = event.clientX;
            const startWidth = headerEl.offsetWidth;

            document.addEventListener('mousemove', onDrag);
            document.addEventListener('mouseup', stopDragging);

            function onDrag(e) {
                const dx = e.clientX - startX;
                headerEl.style.width = `${startWidth + dx}px`;
            }

            function stopDragging() {
                document.removeEventListener('mousemove', onDrag);
                document.removeEventListener('mouseup', stopDragging);
            }
        }
    }

    /**
     * Replace the truncated link text with its full "title" attribute.
     * @param {HTMLTableElement} table A table element containing anchors with a title attribute.
     */
    function replaceLinkTextWithTitle(table) {
        const anchors = table.querySelectorAll('a[title]');
        anchors.forEach(anchor => {
            anchor.textContent = anchor.getAttribute('title');
        });
    }

    window.addEventListener('load', function() {
        // Modify the selector below to match your table's selector
        const table = document.querySelector('.t-tablelist');
        if (table) {
            makeColumnsResizable(table);
            replaceLinkTextWithTitle(table);
        }
    });
})();