如何让jQuery版像素画生成器加载时默认显示25×25网格？

阿华AIGC实验室

2026-5-21

jQuery像素画生成器：页面加载自动生成25×25网格的实现方案

我懂你需求啦——就是想让jQuery版本的像素画生成器，一打开页面就自动渲染出25×25的网格，和原生JS版本一样对吧？其实实现起来超简单，咱们一步步来整：

先理清楚核心问题

原生JS里你直接调用makeGrid(25,25)就能生效，哪怕函数没显式写参数，大概率是因为函数内部其实是通过其他方式（比如全局变量或者DOM元素取值）拿到了尺寸。但jQuery版本咱们可以把代码调整得更清晰可控。

改造方案

1. 把`makeGrid`改成可独立调用的函数

原来的makeGrid是绑定在表单submit事件里的匿名函数，咱们把它抽成一个能单独调用的函数，还可以给它加默认参数：

// 独立的makeGrid函数，默认生成25×25的网格
function makeGrid(height = 25, width = 25) {
    // 先清除现有网格
    $('table tr').remove();
    // 循环生成行
    for (let i = 1; i <= height; i++) {
        $('table').append('<tr></tr>');
        // 给每行添加单元格
        for (let j = 1; j <= width; j++) {
            $('table tr:last').append('<td class="Cell"></td>');
        }
    }
}

// 绑定表单提交事件，用用户输入的尺寸生成网格
$('.size-picker').submit(function(e) {
    e.preventDefault(); // 阻止页面刷新
    // 获取用户输入的高度和宽度
    const userHeight = $('.input-height').val();
    const userWidth = $('.input-width').val();
    // 调用makeGrid生成对应网格
    makeGrid(userHeight, userWidth);
});

2. 页面加载时自动触发网格生成

用jQuery的$(document).ready()确保DOM加载完成后，直接调用makeGrid()就行——因为我们已经给函数设了默认参数25，所以不传参也会生成25×25的网格：

// 页面DOM加载完成后自动生成默认网格
$(document).ready(function() {
    makeGrid();
});

额外小优化：同步输入框默认值

为了让用户一开始就能看到输入框里显示的是25，给输入框加上默认值：

<!-- 在你的尺寸选择表单里给输入框设置value -->
<div class="size-picker">
    <input type="number" class="input-height" value="25" min="1">
    <input type="number" class="input-width" value="25" min="1">
    <button type="submit">生成网格</button>
</div>