微件:GridTable - 版本历史

2026年7月10日 (五) 12:51 愤怒的郎朗

2026-07-10T12:51:18Z

←上一版本		2026年7月10日 (五) 12:51的版本
第46行：		第46行：
	<textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea>		<textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea>
	<br>		<br>
	<label>红线列：<input type="number" id="grid-divider" value="4" min="0" max="9"></label>		<label>红线列：<input type="number" id="grid-divider" value="4" min="0" max="11"></label>
	<label>列数：<input type="number" id="grid-cols" value="9" min="1" max="20"></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="number" id="grid-rows" value="5" min="1" max="15"></label>

2026年7月10日 (五) 12:51 愤怒的郎朗

2026-07-10T12:51:08Z

←上一版本		2026年7月10日 (五) 12:51的版本
第46行：		第46行：
	<textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea>		<textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea>
	<br>		<br>
	<label>~~罐子类型：~~		<label>红线列：<input type="number" id="grid-divider" value="4" min="0" max="9"></label>
	<~~select~~ id="grid-~~jar~~">
	~~<option~~ value="~~问号罐~~"~~>问号罐</option>~~
	~~<option value~~="~~僵尸罐~~"~~>僵尸罐</option>~~
	~~<option value~~="~~植物罐~~">~~植物罐</option>~~
	~~</select>~~
	</label>
	<label>列数：<input type="number" id="grid-cols" value="9" min="1" max="20"></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="number" id="grid-rows" value="5" min="1" max="15"></label>

2026年7月10日 (五) 12:13 愤怒的郎朗

2026-07-10T12:13:15Z

←上一版本		2026年7月10日 (五) 12:13的版本
第46行：		第46行：
	<textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea>		<textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea>
	<br>		<br>
			<label>罐子类型：
			<select id="grid-jar">
			<option value="问号罐">问号罐</option>
			<option value="僵尸罐">僵尸罐</option>
			<option value="植物罐">植物罐</option>
			</select>
			</label>
	<label>列数：<input type="number" id="grid-cols" value="9" min="1" max="20"></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="number" id="grid-rows" value="5" min="1" max="15"></label>

2026年7月10日 (五) 03:33 愤怒的郎朗

2026-07-10T03:33:43Z

←上一版本		2026年7月10日 (五) 03:33的版本
第56行：		第56行：

	<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 bg = $('#grid-bg').val() \|\| '#2d2d2d';~~
	~~var cell = $('#grid-cell').val() \|\| '#3a3a3a';~~
	~~var border = $('#grid-border').val() \|\| '#555555';~~
	~~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) {~~
	~~data[row + '-' + col] = name;~~
	}
	}
	~~});~~

	~~var table = '{\| style="width:100%;max-width:900px;table-layout:fixed;text-align:center;background:' + bg + ';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 plant = data[r + '-' + c];~~
	~~if (plant) {~~
	~~table += '\| style="height:80px;border:2px solid ' + border + ';background:' + cell + ';" \| [[' + plant + '\|50px\|link=' + plant + ']]\n';~~
	~~} else {~~
	~~table += '\| style="height:80px;border:2px solid ' + border + ';background:' + cell + ';" \| \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,'<').replace(/>/g,'>') + '</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日 (五) 03:29 愤怒的郎朗

2026-07-10T03:29:36Z

←上一版本		2026年7月10日 (五) 03:29的版本
第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 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea>		<textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,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-cols" value="9" min="1" max="20"></label>
	<label>行数：<input type="number" id="grid-rows" value="5" min="1" max="15" ~~style~~="~~width:50px;~~"></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>
第53行：		第63行：
	var cols = parseInt($('#grid-cols').val()) \|\| 9;		var cols = parseInt($('#grid-cols').val()) \|\| 9;
	var rows = parseInt($('#grid-rows').val()) \|\| 5;		var rows = parseInt($('#grid-rows').val()) \|\| 5;
			var bg = $('#grid-bg').val() \|\| '#2d2d2d';
			var cell = $('#grid-cell').val() \|\| '#3a3a3a';
			var border = $('#grid-border').val() \|\| '#555555';
	var lines = raw.split('\n');		var lines = raw.split('\n');
	var data = {};		var data = {};
第63行：		第76行：
	var row = parseInt(parts[2].trim());		var row = parseInt(parts[2].trim());
	if (name && col >= 1 && row >= 1) {		if (name && col >= 1 && row >= 1) {
	~~var key =~~ row + '-' + col;		data[row + '-' + col] = name;
	~~data[key~~] = name;
	}		}
	}		}
	});		});

	var table = '{\| style="width:100%;max-width:900px;table-layout:fixed;text-align:center;background:~~#2d2d2d~~;border-collapse:collapse;"\n';		var table = '{\| style="width:100%;max-width:900px;table-layout:fixed;text-align:center;background:' + bg + ';border-collapse:collapse;"\n';
	table += '\|-\n! !!';		table += '\|-\n! !!';
	for (var c = 1; c <= cols; c++) table += ' 列' + c + ' !!';		for (var c = 1; c <= cols; c++) table += ' 列' + c + ' !!';
第77行：		第89行：
	table += '\|-\n! 行' + r + '\n';		table += '\|-\n! 行' + r + '\n';
	for (var c = 1; c <= cols; c++) {		for (var c = 1; c <= cols; c++) {
	var ~~key~~ = r + '-' + c;		var plant = data[r + '-' + c];
	~~var plant = data[key~~];
	if (plant) {		if (plant) {
	table += '\| style="height:80px;border:2px solid ~~#555~~;background:~~#3a3a3a~~;" \| [[' + plant + '\|50px\|link=' + plant + ']]\n';		table += '\| style="height:80px;border:2px solid ' + border + ';background:' + cell + ';" \| [[' + plant + '\|50px\|link=' + plant + ']]\n';
	} else {		} else {
	table += '\| style="height:80px;border:2px solid ~~#555~~;background:~~#3a3a3a~~;" \| \n';		table += '\| style="height:80px;border:2px solid ' + border + ';background:' + cell + ';" \| \n';
	}		}
	}		}
第103行：		第114行：
	});		});

	~~// 初始生成~~
	generate();		generate();
	})();		})();
	</script>		</script>
	</includeonly>		</includeonly>