打开/关闭搜索
打开/关闭菜单
933
1525
112
1.4万
植物大战僵尸杂交版Wiki
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

微件:GridTable：修订间差异

来自植物大战僵尸杂交版Wiki
更多操作
创建页面，内容为“<includeonly> <style> .grid-input-area { margin: 10px 0; padding: 12px; background: #f5f5f5; border-radius: 8px; } .grid-input-area textarea { width: 100%; height: 150px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-family: monospace; font-size: 13px; resize: vertical; box-sizing: border-box; } .grid-input-area button { margin-top: 8px; padding: 8px 20px; background: #4CAF50;…”
 
无编辑摘要
 
（未显示同一用户的4个中间版本）
第29行： 第29行：
}
}
.grid-input-area button:hover { background: #45a049; }
.grid-input-area button:hover { background: #45a049; }
.grid-input-area label { font-size: 13px; color: #888; margin-right: 6px; }
.grid-input-area input[type=number] {
    width: 50px; padding: 4px; border: 1px solid #ccc; border-radius: 4px; text-align: center;
}
.grid-input-area input[type=color] {
    width: 40px; height: 30px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; vertical-align: middle;
}
.grid-preview {
.grid-preview {
     margin-top: 10px;
     margin-top: 10px;
第36行： 第43行：


<div class="grid-input-area">
<div class="grid-input-area">
     <p style="font-size:13px;color:#888;">每行格式：<b>植物名,列,行</b>（用逗号分隔，一行一个）</p>
     <p style="font-size:13px;color:#888;">每行格式：<b>植物名,列,行</b>（逗号分隔，一行一个）</p>
     <textarea id="grid-data" placeholder="豌豆向日葵,1,1&#10;豌豆射手,2,1&#10;向日葵,6,3&#10;坚果墙,7,5"></textarea>
     <textarea id="grid-data" placeholder="豌豆向日葵,1,1&#10;豌豆射手,2,1&#10;向日葵,6,3&#10;坚果墙,7,5"></textarea>
     <br>
     <br>
     <label>列数：<input type="number" id="grid-cols" value="9" min="1" max="20" style="width:50px;"></label>
<label>红线列：<input type="number" id="grid-divider" value="4" min="0" max="11"></label>
     <label>行数：<input type="number" id="grid-rows" value="5" min="1" max="15" style="width:50px;"></label>
     <label>列数：<input type="number" id="grid-cols" value="9" min="1" max="20"></label>
     <label>行数：<input type="number" id="grid-rows" value="5" min="1" max="15"></label>
    <label>背景色：<input type="color" id="grid-bg" value="#2d2d2d"></label>
    <label>格子色：<input type="color" id="grid-cell" value="#3a3a3a"></label>
    <label>边框色：<input type="color" id="grid-border" value="#555555"></label>
     <button id="grid-generate">生成表格</button>
     <button id="grid-generate">生成表格</button>
     <button id="grid-copy" style="background:#888;">复制代码</button>
     <button id="grid-copy" style="background:#888;">复制代码</button>
第46行： 第57行：


<div class="grid-preview" id="grid-preview"></div>
<div class="grid-preview" id="grid-preview"></div>
<script>
(function() {
    function generate() {
        var raw = $('#grid-data').val().trim();
        var cols = parseInt($('#grid-cols').val()) || 9;
        var rows = parseInt($('#grid-rows').val()) || 5;
        var lines = raw.split('\n');
        var data = {};
        lines.forEach(function(line) {
            var parts = line.split(',');
            if (parts.length >= 3) {
                var name = parts[0].trim();
                var col = parseInt(parts[1].trim());
                var row = parseInt(parts[2].trim());
                if (name && col >= 1 && row >= 1) {
                    var key = row + '-' + col;
                    data[key] = name;
                }
            }
        });
        var table = '{| style="width:100%;max-width:900px;table-layout:fixed;text-align:center;background:#2d2d2d;border-collapse:collapse;"\n';
        table += '|-\n! !!';
        for (var c = 1; c <= cols; c++) table += ' 列' + c + ' !!';
        table = table.slice(0, -2) + '\n';
        for (var r = 1; r <= rows; r++) {
            table += '|-\n! 行' + r + '\n';
            for (var c = 1; c <= cols; c++) {
                var key = r + '-' + c;
                var plant = data[key];
                if (plant) {
                    table += '| style="height:80px;border:2px solid #555;background:#3a3a3a;" | [[' + plant + '|50px|link=' + plant + ']]\n';
                } else {
                    table += '| style="height:80px;border:2px solid #555;background:#3a3a3a;" | \n';
                }
            }
        }
        table += '|}';
        $('#grid-preview').html('<pre style="background:#f9f9f9;padding:10px;border-radius:6px;font-size:12px;max-height:400px;overflow:auto;">' + table.replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</pre>');
        $('#grid-preview').data('code', table);
    }
    $('#grid-generate').click(generate);
    $('#grid-copy').click(function() {
        var code = $('#grid-preview').data('code');
        if (code) {
            navigator.clipboard.writeText(code).then(function() {
                $('#grid-copy').text('✅ 已复制');
                setTimeout(function() { $('#grid-copy').text('复制代码'); }, 1500);
            });
        }
    });
    // 初始生成
    generate();
})();
</script>
</includeonly>
</includeonly>

2026年7月10日 (五) 12:51的最新版本

检索自“https://new.pvzhe.wiki/index.php?title=微件:GridTable&oldid=8350”