如何修改HTML/JS代码 实现按用户输入数量生成对应表单行

原有代码问题点 #

• 表单内的按钮未指定类型，点击时默认触发页面提交刷新，打断渲染逻辑
• 输入框获取到的值是字符串类型，未做数值转换直接参与循环判断，易出现逻辑异常
• 函数参数和内部获取的输入值变量重名，易引发变量污染
• 循环内部写了return语句，第一次循环就会终止函数执行，最多只能生成1行内容
• 存在语法错误：count++后误写冒号，会直接触发JS报错
• 标签文本未正确拼接计数变量，所有行的标题都会显示固定的Title + count文本
• 未指定生成内容的插入位置，即便生成了表单行也不会展示到页面上
• 代码中残留Vue专属的v-model属性，未引入Vue环境时该属性无实际作用

修正后可直接运行的代码 #

HTML部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<form onsubmit="return false;">
  num: <input type="number" name="a" id="num" min="1"><br>
  <button type="button" onclick="addnewrow()">Add</button>
</form>
<!-- 新增容器存放动态生成的表单行 -->
<div id="formRowContainer" class="container-fluid mt-3"></div>

JS部分 #

function addnewrow() {
  // 获取输入值并转为整数，做合法性校验
  const inputNum = parseInt(document.getElementById('num').value);
  const container = document.getElementById('formRowContainer');
  // 清空之前生成的内容，避免重复追加
  container.innerHTML = '';

  // 输入值不合法直接终止
  if (isNaN(inputNum) || inputNum < 1) {
    alert('请输入大于0的正整数');
    return;
  }

  let allRows = '';
  // 循环生成对应数量的行，控制循环边界避免多生成1行
  for (let i = 0; i < inputNum; i++) {
    const rowIndex = i + 1;
    const newrow = `<div class="row">
               <div class="col-md-4">
               <div class="form-group label-floating">
               <label class="control-label">Title ${rowIndex}</label>
               <input type="text" class="form-control" >
               </div>
               </div>
               </div>`;
    allRows += newrow;
  }
  // 把所有生成的行一次性插入到页面容器中
  container.innerHTML = allRows;
}

修复逻辑说明 #

• 给form绑定onsubmit="return false;"、按钮添加type="button"，阻止默认的表单提交刷新行为
• 输入值统一用parseInt转为整数，增加输入合法性校验，输入非正整数时给出提示
• 把return移出循环，循环过程中把所有生成的行拼接成完整字符串，循环结束后一次性插入DOM，减少页面重绘
• 修正语法错误，用模板字符串正确拼接计数变量，每行标题会按顺序显示Title 1、Title 2……
• 新增专门的容器存放动态生成的表单行，每次生成前先清空容器旧内容，避免多次点击重复追加
• 移除无作用的v-model属性，清理冗余代码

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