如何用JS实现选择下拉框值后，为staticTable加空行并生成dynamicTable行？

HTML 结构 #

先搭建基础页面结构，包含下拉选择框、静态表格和动态表格：

<select id="dropdownVal">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<table id="staticTable" border="1">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>静态数据1-1</td>
      <td>静态数据1-2</td>
      <td>静态数据1-3</td>
    </tr>
    <tr>
      <td>静态数据2-1</td>
      <td>静态数据2-2</td>
      <td>静态数据2-3</td>
    </tr>
    <tr>
      <td>静态数据3-1</td>
      <td>静态数据3-2</td>
      <td>静态数据3-3</td>
    </tr>
  </tbody>
</table>

<table id="dynamicTable" border="1">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript 逻辑 #

通过监听下拉框的变化事件，按规则生成动态行并给静态表格添加空行：

// 获取页面元素
const dropdown = document.getElementById('dropdownVal');
const staticTbody = document.getElementById('staticTable').querySelector('tbody');
const dynamicTbody = document.getElementById('dynamicTable').querySelector('tbody');

// 保存静态表格的初始数据行（克隆节点，避免后续操作污染原始数据）
const originalStaticRows = Array.from(staticTbody.querySelectorAll('tr')).map(row => row.cloneNode(true));

// 下拉框值变化时触发处理逻辑
dropdown.addEventListener('change', function() {
  const multiplier = parseInt(this.value);
  
  // 重置表格状态：清空动态表格，恢复静态表格到初始3行
  dynamicTbody.innerHTML = '';
  staticTbody.innerHTML = '';
  originalStaticRows.forEach(row => staticTbody.appendChild(row));

  // 按倍数生成动态行，同时给静态表格添加空行
  for (let i = 0; i < multiplier; i++) {
    originalStaticRows.forEach(staticRow => {
      // 复制静态行到动态表格
      const newDynamicRow = staticRow.cloneNode(true);
      dynamicTbody.appendChild(newDynamicRow);

      // 给静态表格添加空行，列数与静态行保持一致
      const emptyRow = document.createElement('tr');
      const colCount = staticRow.querySelectorAll('td').length;
      for (let j = 0; j < colCount; j++) {
        emptyRow.appendChild(document.createElement('td'));
      }
      staticTbody.appendChild(emptyRow);
    });
  }
});

逻辑说明 #

1. 保存初始行：提前克隆静态表格的3行初始数据，确保每次重置都能恢复原始状态
2. 重置操作：每次切换下拉框值时，先清空动态表格，把静态表格恢复到初始的3行数据
3. 生成动态行：根据选中的倍数，循环复制静态行到动态表格；每复制一行动态行，就给静态表格添加一行对应列数的空行
4. 列数适配：空行的列数和静态行保持一致，避免表格布局错乱

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