如何捕获HTML表格输入框值并插入DataTable，实现表头列名映射

没问题，这就给你一套完整的实现方案，刚好匹配你的需求：

1. 补全后的HTML结构 #

首先我们把你提供的代码补全，加上必要的依赖库、输入框的统一类名，还有操作按钮和DataTable的展示容器：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入DataTables样式和脚本 -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<table id="tab">
  <thead>
    <tr>
      <th id="Header1" runat="server">Header 1</th>
      <th id="Header2" runat="server" class="hidetablerows">Header 2</th>
      <th id="Header3" runat="server" class="hidetablerows">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="lblHeader1" runat="server"><input type="text" name="txtHeader1" class="table-input" /></td>
      <td id="lblHeader2" runat="server" class="hidetablerows"><input type="text" name="txtHeader2" class="table-input" /></td>
      <td id="lblHeader3" runat="server" class="hidetablerows"><input type="text" name="txtHeader3" class="table-input" /></td>
    </tr>
  </tbody>
</table>

<!-- 操作按钮 -->
<button id="addRowBtn">添加新行</button>
<button id="submitToDataTableBtn">提交到DataTable</button>

<!-- DataTable展示容器 -->
<table id="dataTable" class="display" style="width:100%"></table>

2. jQuery核心逻辑代码 #

接下来是实现添加行、捕获输入值并插入DataTable的核心代码：

$(document).ready(function() {
  // 第一步：从原表格表头生成DataTable的列配置
  var dtColumns = [];
  $('#tab thead th').each(function() {
    var colConfig = {
      title: $(this).text() // 用<th>的文本作为DataTable列名
    };
    // 如果表头有hidetablerows类，对应DataTable列也设置为隐藏
    if ($(this).hasClass('hidetablerows')) {
      colConfig.visible = false;
    }
    dtColumns.push(colConfig);
  });

  // 初始化DataTable
  var myDataTable = $('#dataTable').DataTable({
    columns: dtColumns
  });

  // 第二步：实现添加新行功能
  $('#addRowBtn').click(function() {
    // 克隆第一行的结构
    var newRow = $('#tab tbody tr:first').clone();
    // 清空新行输入框的内容，避免继承之前的值
    newRow.find('input').val('');
    // 把新行追加到表格
    $('#tab tbody').append(newRow);
  });

  // 第三步：捕获输入值并插入DataTable
  $('#submitToDataTableBtn').click(function() {
    // 遍历原表格的每一行数据
    $('#tab tbody tr').each(function() {
      var rowData = [];
      // 收集当前行所有输入框的值
      $(this).find('input.table-input').each(function() {
        rowData.push($(this).val());
      });
      // 把数据插入DataTable并刷新
      myDataTable.row.add(rowData).draw();
    });

    // 可选：提交后清空原表格的输入框，方便下次输入
    $('#tab tbody tr').find('input').val('');
  });
});

3. 关键细节说明 #

• 列名映射：通过遍历原表格的<th>元素，直接把表头文本作为DataTable的列标题，完美匹配你的映射规则。
• 隐藏列处理：如果原表头有hidetablerows类，对应的DataTable列会自动设置为隐藏，保持和原表格的一致性。
• 添加行逻辑：克隆第一行的结构保证新行和原有行的输入框结构完全一致，同时清空输入值避免重复数据。
• 输入值捕获：给所有输入框加了统一的table-input类，用这个类选择器可以精准定位所有输入框，避免依赖容易重复的name属性。
• ASP.NET兼容：你代码里的runat="server"标记完全不影响前端JS的运行，如果担心ASP.NET生成的ID变化，可以给控件加上ClientIDMode="Static"保证ID不变。

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