如何让点击按钮新增行的JS代码初始显示10行而非1行？

嘿，这个需求很容易搞定，咱们只需要对原代码做两处核心修改：

• 修正初始行数计数器
  原代码里var x = 1;把初始行数设为1，咱们直接把它改成var x = 10;。这样后续点击新增按钮时，计数器能准确跟踪当前行数，不会突破你设定的15行上限。

• 页面加载时自动生成剩余行
  通常这类场景下，你的.input_fields_wrap容器里默认已经有1行输入框了。所以我们需要在页面就绪后，循环调用9次新增行的逻辑，把行数补到10行。如果你的容器初始没有默认行，那循环次数就要改成10次。

下面是修改后的完整代码（我补全了你原代码里截断的部分，确保逻辑完整）：

$(document).ready(function() {
    var max_fields = 15; // 允许的最大输入框数量
    var wrapper = $(".input_fields_wrap"); // 包裹输入框的容器
    var add_button = $(".add_field_button"); // 新增按钮
    var x = 10; // 初始行数设为10

    // 页面加载时自动生成剩余的行（默认已有1行，所以循环9次）
    for (let i = 1; i < x; i++) {
        // 这里的HTML要和你点击新增按钮时生成的完全一致
        wrapper.append('<div><input type="text" name="mytext[]" /><a href="#" class="remove_field">删除</a></div>');
    }

    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            wrapper.append('<div><input type="text" name="mytext[]" /><a href="#" class="remove_field">删除</a></div>');
        }
    });

    // 移除行的逻辑（如果原代码有这部分的话）
    $(wrapper).on("click", ".remove_field", function(e) {
        e.preventDefault();
        $(this).parent("div").remove();
        x--;
    });
});

小提示： #

• 如果你的.input_fields_wrap初始是空的（没有默认行），把循环改成for (let i = 0; i < x; i++)，这样会直接生成10行。
• 务必保证循环里生成的HTML和点击按钮时生成的完全一样，这样样式和交互逻辑才会统一。

这样修改后，页面一加载就会显示10行输入框，新增按钮也能正常工作，直到达到15行的上限~

内容的提问来源于stack exchange，提问作者Thomas Veldhuizen