如何用JS获取输入值并在模态框表格中以label/td展示？

1. 调整HTML结构 #

保留原有表单和Bootstrap模态框，确保模态框内的表格有可动态插入内容的<tbody>容器：

<!-- 表单 -->
<form id="myForm">
  <div class="mb-3">
    <label for="name" class="form-label">姓名</label>
    <input type="text" class="form-control" id="name" name="username">
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="email" name="useremail">
  </div>
  <div class="mb-3">
    <label for="phone" class="form-label">手机号</label>
    <input type="tel" class="form-control" id="phone" name="userphone">
  </div>
  <button type="button" class="btn btn-primary" id="saveBtn">保存并预览</button>
</form>

<!-- Bootstrap模态框 -->
<div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="previewModalLabel">表单数据预览</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>字段</th>
              <th>内容</th>
            </tr>
          </thead>
          <tbody id="previewTableBody">
            <!-- 动态内容将插入此处 -->
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

2. 修改jQuery脚本 #

点击保存按钮时，遍历表单输入元素、提取值，用<td>（或嵌套<label>）生成表格行并插入到模态框中：

$(document).ready(function() {
  $('#saveBtn').click(function() {
    // 清空表格原有内容，避免重复渲染
    $('#previewTableBody').empty();

    // 遍历表单内所有输入/选择/文本域元素
    $('#myForm input, #myForm select, #myForm textarea').each(function() {
      // 获取友好的字段名称（从对应label中提取）
      const fieldLabel = $(this).closest('.mb-3').find('.form-label').text();
      // 获取输入值并去除首尾空格
      const fieldValue = $(this).val().trim();

      // 生成表格行，用<td>直接显示内容
      const tableRow = $('<tr>');
      tableRow.append($('<td>').text(fieldLabel));
      // 若想用<label>包裹值，替换成下面这行：
      // tableRow.append($('<td>').append($('<label>').addClass('form-label').text(fieldValue)));
      tableRow.append($('<td>').text(fieldValue));

      // 将行添加到表格主体
      $('#previewTableBody').append(tableRow);
    });

    // 打开模态框
    const previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
    previewModal.show();
  });
});

关键细节说明 #

• 字段名称优化：通过closest('.mb-3').find('.form-label')获取输入框对应的label文本，比直接用name/id更友好
• 内容渲染方式：
  • 直接用<td>显示值：代码简洁，适合纯文本展示
  • 用<label>嵌套在<td>中：可以给label加Bootstrap样式类，适配现有样式体系
• 元素范围控制：遍历器包含input, select, textarea，覆盖所有常见表单元素；若需排除隐藏域，可加过滤条件：$('#myForm input:not([type="hidden"]), ...')
• 空值处理：如果不想显示空值字段，可在生成行前加判断：if (fieldValue) { /* 生成并添加行 */ }

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