「Table_Setting_javascript」の編集履歴（バックアップ）一覧に戻る

Table_Setting_javascript - (2026/05/02 (土) 11:16:32) のソース

#javascript(){{
// ========================================
// 1行目に設定を書くと自動で列に適用する機能
// 基本書式： |80|250|100|80|s        ← 末尾に s (setting)
//
// その他：   |10%|70%|10%|10%|s      ← % 設定
//            |HEADER:|||s            ← HEADER: があれば table-left-header を付与
//            |CENTER:|LEFT:|RIGHT:|s ← 横位置設定
//            |MIDDLE:|TOP:|BOTTOM:|s ← 縦位置設定
//            |wrap|wrap||s           ← wrap があれば 自動折り返しのみ設定
// ========================================

document.addEventListener('DOMContentLoaded', function () {

    const tables = document.querySelectorAll('#wikibody table');

    tables.forEach((table, tableIndex) => {

        // ========================================
        // 設定行取得
        // ========================================

        const prev = table.previousElementSibling;

        if (!prev) return;

        const lines = prev.textContent
            .split('\n')
            .map(line => line.trim());

        const settingLine = lines.find(line => /[sS]$/.test(line));
        if (!settingLine) return;

        console.log(`[table-setting] table ${tableIndex + 1}`);

        // ========================================
        // 設定解析
        // ========================================

        const colSettings = settingLine
            .replace(/[sS]$/, '')
            .split('|')
            .slice(1);

        // 設定行だけ非表示
        prev.innerHTML = prev.innerHTML.replace(settingLine, '');

        // ========================================
        // table base style
        // ========================================

        table.style.tableLayout = 'fixed';
        table.style.width = '100%';

        // ========================================
        // 仮想グリッド生成
        // grid[row][col] = cell
        // ========================================

        const rows = Array.from(table.querySelectorAll('tr'));

        const grid = [];

        rows.forEach((row, rowIndex) => {

            if (!grid[rowIndex]) {
                grid[rowIndex] = [];
            }

            const cells = Array.from(
                row.querySelectorAll('td, th')
            );

            let colIndex = 0;

            cells.forEach((cell) => {

                // 使用済み位置スキップ
                while (grid[rowIndex][colIndex]) {
                    colIndex++;
                }

                const rowspan = parseInt(
                    cell.getAttribute('rowspan') || 1
                );

                const colspan = parseInt(
                    cell.getAttribute('colspan') || 1
                );

                // 占有範囲登録
                for (let r = 0; r < rowspan; r++) {

                    if (!grid[rowIndex + r]) {
                        grid[rowIndex + r] = [];
                    }

                    for (let c = 0; c < colspan; c++) {

                        grid[rowIndex + r][colIndex + c] = cell;
                    }
                }

                colIndex += colspan;
            });
        });

        // ========================================
        // 最大列数
        // ========================================

        const maxCols = Math.max(
            ...grid.map(row => row.length)
        );

        // ========================================
        // cellごとの適用済み管理
        // ========================================

        const appliedMap = new WeakMap();

        // ========================================
        // 列単位で設定適用
        // ========================================

        for (let col = 0; col < maxCols; col++) {

            const setting = colSettings[col];

            if (!setting) continue;

            for (let row = 0; row < grid.length; row++) {

                const cell = grid[row]?.[col];

                if (!cell) continue;

                // 同じセルに複数回適用しない
                if (appliedMap.has(cell)) continue;

                applySetting(
                    cell,
                    setting,
                    col
                );

                appliedMap.set(cell, true);
            }
        }

    });

    // ========================================
    // 設定適用
    // ========================================

    function applySetting(cell, setting, colIndex) {

        let w = setting;

        // ========================================
        // align
        // ========================================

        let alignH = null;
        let alignV = null;

        // HEADER
        if (w.includes('HEADER:')) {
            cell.classList.add('table-left-header');
        }

        // horizontal
        if (w.includes('CENTER:')) alignH = 'center';
        if (w.includes('LEFT:'))   alignH = 'left';
        if (w.includes('RIGHT:'))  alignH = 'right';

        // vertical
        if (w.includes('MIDDLE:')) alignV = 'middle';
        if (w.includes('TOP:'))    alignV = 'top';
        if (w.includes('BOTTOM:')) alignV = 'bottom';

        // ========================================
        // prefix除去
        // ========================================

        w = w
            .replaceAll('HEADER:', '')
            .replaceAll('CENTER:', '')
            .replaceAll('LEFT:', '')
            .replaceAll('RIGHT:', '')
            .replaceAll('MIDDLE:', '')
            .replaceAll('TOP:', '')
            .replaceAll('BOTTOM:', '')
            .trim();

        // ========================================
        // wrap
        // ========================================

        if (w === 'wrap') {

            cell.style.whiteSpace = 'normal';
            cell.style.wordBreak = 'break-all';
            cell.style.overflowWrap = 'break-word';
        }

        // ========================================
        // width
        // ========================================

        else if (/^\d+%?$/.test(w)) {

            // THにはwidth適用しない
            if (cell.tagName !== 'TH') {

                if (w.endsWith('%')) {

                    cell.style.width = 'auto';
                    cell.style.maxWidth = w;

                } else {

                    cell.style.width = `${w}px`;
                    cell.style.maxWidth = `${w}px`;
                }

                cell.style.whiteSpace = 'normal';
                cell.style.wordBreak = 'break-all';
                cell.style.overflowWrap = 'break-word';
            }
        }

        // ========================================
        // align apply
        // ========================================

        if (alignH) {
            cell.style.textAlign = alignH;
        }

        if (alignV) {
            cell.style.verticalAlign = alignV;
        }
    }
});
}}