JavaScript表格动态添加数据与列的实现方案优化咨询

嘿，我来帮你梳理下问题并给出落地的优化方案～

一、先修复现有代码问题，实现「选择ID自动填充表格行」功能 #

你当前的代码存在几个小问题：表格结构不规范、JS里的textarea写法错误、使用innerHTML +=可能导致DOM事件丢失。我先帮你优化这些点，同时实现自动填充Product ID的需求：

优化后的完整代码 #

HTML 部分

<div class="set-form">
  <label>Product ID: <input type="text" name="fname" id="productIdInput" placeholder="输入ID后点击添加"></label>
  <input type="button" id="more_fields" onclick="add_fields();" value="Add More" class="btn btn-info" />
</div>
<table id="myTable">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Title</th>
      <th>Start Date</th>
      <th>End Date</th>
      <th>Excl</th>
      <th>Territory</th>
      <th>Media</th>
      <th>Language</th>
      <th>Format</th>
      <th>Acquiring Division</th>
      <th>Owner</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody> <!-- 新增tbody统一存放动态行，结构更清晰 -->
</table>

CSS 部分（保持原有样式）

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}

JS 部分（实现自动填充+安全添加行）

function add_fields() {
  // 获取用户输入的Product ID
  const productId = document.getElementById('productIdInput').value.trim();
  
  const tbody = document.getElementById('tableBody');
  const newRow = document.createElement('tr');
  
  // 对应表头的11列，第一列自动填充ID，其余为空
  const cellValues = [
    productId,
    '', '', '', '', '', '', '', '', '', ''
  ];
  
  // 循环创建每个单元格和textarea
  cellValues.forEach(val => {
    const td = document.createElement('td');
    const textarea = document.createElement('textarea');
    textarea.style = "resize: none; width: 100%;";
    textarea.value = val;
    td.appendChild(textarea);
    newRow.appendChild(td);
  });
  
  tbody.appendChild(newRow);
  
  // 可选：清空输入框，方便下次输入
  document.getElementById('productIdInput').value = '';
}

现在点击「Add More」按钮时，输入框里的Product ID会自动填充到新行的对应位置，同时代码更稳定，不会破坏现有DOM事件。

二、实现「批量添加列及对应数据」的功能 #

要批量添加列，我们可以先定义列的配置信息（列名、默认值），然后动态修改表头和所有现有行：

批量添加列的示例代码 #

function addBatchColumns(columnConfigs) {
  const table = document.getElementById('myTable');
  const headerRow = table.querySelector('thead tr');
  const allBodyRows = table.querySelectorAll('tbody tr');
  
  // 第一步：给表头添加新列
  columnConfigs.forEach(config => {
    const th = document.createElement('th');
    th.textContent = config.columnName;
    headerRow.appendChild(th);
  });
  
  // 第二步：给每一行现有行添加对应单元格
  allBodyRows.forEach(row => {
    columnConfigs.forEach(config => {
      const td = document.createElement('td');
      const textarea = document.createElement('textarea');
      textarea.style = "resize: none; width: 100%;";
      textarea.value = config.defaultValue || '';
      td.appendChild(textarea);
      row.appendChild(td);
    });
  });
  
  // 注意：如果后续还要添加新行，记得更新add_fields函数里的cellValues，把新列的默认值加进去
}

// 调用示例：一次性添加「Status」和「Notes」两列
addBatchColumns([
  { columnName: 'Status', defaultValue: 'Active' },
  { columnName: 'Notes', defaultValue: '' }
]);

调用这个函数后，表头会新增指定列，所有已存在的行也会补上对应单元格，还能自定义默认值～

额外小建议 #

• 可以给每个textarea添加对应的name属性（比如textarea.name = "productId"），方便后续提交表单时批量获取数据。
• 如果需要「选择已有ID」的功能，可以把输入框改成下拉选择框<select>，提前填充好可选ID，用户选择后直接填充到表格行，体验会更好。

内容的提问来源于stack exchange，提问作者m.d venkatesh