动态生成与填充表单输入控件：基于HTML模板和jQuery的实现-js教程-PHP中文网

动态生成与填充表单输入控件：基于HTML模板和jQuery的实现

碧海醫心

发布： 2025-10-13 11:23:40

原创

380人浏览过

动态生成与填充表单输入控件：基于HTML模板和jQuery的实现

本教程详细阐述了如何利用html `

引言

在现代Web开发中，经常需要根据后端数据或其他用户操作动态地生成表单元素。HTML5的 <template> 标签提供了一种标准化的方式来定义可复用的标记结构，而JavaScript（特别是结合jQuery）则能高效地操作这些模板，创建并填充实际的DOM元素。本文将指导您如何结合这两者，实现动态生成带有预设值的输入控件。

核心概念与实现步骤

动态生成输入控件的核心在于正确地获取模板内容、克隆它，然后定位到克隆后的输入元素并设置其值。

1. HTML模板结构

首先，我们需要定义一个HTML <template> 标签，它将包含我们希望重复使用的输入控件结构。为了与现代前端框架和样式库（如Bootstrap）更好地集成，建议采用语义化的HTML结构。

<template id="gridrow-template-input-group">
  <div class="row">
    <div class="input-group mb-3">
      <input type="text" name="name[]" class="form-control"
          placeholder="Row x" data-value="0" >
      <div class="input-group-text" style="cursor:pointer;" onclick="RemoveRow(this)">
        <i class="fa fa-remove" style="color:#CDCDCD"></i>
      </div>
    </div>
  </div>
</template>
<div id="gridrow-field-container" class="container"></div>

登录后复制

注意事项：

立即学习“前端免费学习笔记（深入）”；

模板内的 id 属性应避免使用固定值，因为动态生成多个元素时会导致ID重复，影响DOM操作和唯一性。这里我们移除了原始模板中的 id='newrowItem_1' 和 id='fieldrowItem_1'。
为了美观和功能性，我们使用了Bootstrap的 input-group 类和 input-group-text 来包裹输入框和移除按钮。
onclick="RemoveRow(this)" 直接绑定了事件，对于动态生成的元素，这是一种简单但可能不是最佳实践的方式。更推荐使用事件委托来处理动态元素的事件。

2. 引入必要的依赖

为了使样式和图标正常显示，我们需要引入Bootstrap和Font Awesome。同时，jQuery是本文操作DOM的基础。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

登录后复制

请确保这些依赖在您的HTML文档的 <head> 或 <body> 标签的适当位置引入。

3. JavaScript逻辑：克隆与填充

核心的JavaScript逻辑负责获取模板、克隆其内容、找到内部的输入框并设置其值，最后将其添加到页面中。

// 示例数据，模拟从后端获取的值
const item = {
  MeetingPollingPartsValues: [
    { QuestionValue: '选项一' },
    { QuestionValue: '选项二' },
    { QuestionValue: '选项三' }
  ]
};

// 获取容器和模板
const $container = $('#gridrow-field-container');
const $template = $('#gridrow-template-input-group');

// 定义移除行函数
const RemoveRow = (span) => {
  $(span).closest('.row').remove();
};

// 遍历数据并动态生成输入框
$(item.MeetingPollingPartsValues).each((index, partValue) => {
  // 关键步骤：正确克隆模板内容
  // 使用 .contents().clone() 可以确保克隆的是模板内部的所有子节点，
  // 并且这些节点被jQuery正确包装，以便后续的 .find() 操作。
  const $inputGroup = $template.contents().clone();

  // 在克隆的元素中查找输入控件
  const $inputControl = $inputGroup.find('input');

  // 设置输入控件的值
  $inputControl.val(partValue.QuestionValue);

  // 设置其他属性，如placeholder和data-value
  $inputControl.attr('placeholder', `行 ${index + 1}`);
  $inputControl.attr('data-value', partValue.QuestionValue); // 可根据需求设置

  // 将生成并填充好的输入组添加到容器中
  $container.append($inputGroup);
});

登录后复制

关键点解析：

$template.contents().clone(): 这是正确克隆模板内容的关键。template.content 返回一个 DocumentFragment，直接对其调用 $(template.content.cloneNode(true)) 可能不会得到一个jQuery对象，其 find() 方法可能无法按预期工作。而 $template.contents() 会获取 <template> 标签内部的所有子节点（包括文本节点），并将其包装成jQuery对象集合。对其调用 .clone() 则会深度克隆这些节点，确保所有子元素都被复制。
$inputGroup.find('input'): 在克隆后的 $inputGroup 内部查找 <input> 元素。由于 $inputGroup 现在是一个有效的jQuery对象，此查找操作将准确无误。
$inputControl.val(value): 设置输入框的 value 属性。
$inputControl.attr('attributeName', 'value'): 用于设置其他HTML属性，如 placeholder 和 data-value。