使用JavaScript添加含相同下拉框的表格行

开发者阿泽

2026-7-20

问题：新增带下拉框的表格行

先为欠佳的代码致歉。我在产品订购表格底部加了个按钮，点击能新增表格行，但目前只能添加空行，需要让新增的行和现有行一样包含相同的下拉框（select）组件。

现有代码

<div>
  <table id="lst-table">
    <thead>
      <tr>
        <th class="lst-th" scope="col">Model <br>Ref.</th>
        <th class="lst-th" scope="col">Perforation <br>Type         </th>
        <th class="lst-th" scope="col">LST Cover <br>Length
        </th>
    </thead>
    <tbody class="lst-tbody">
      <tr>
        <td>
          <select>
            <option value="">Model Ref.</option>
            <option value="145-520">ARM 145-520</option>
            <option value="145-670">ARM 145-670</option>
            <option value="145-820">ARM 145-820</option>
            <option value="145-920">ARM 145-920</option>
            <option value="165-520">ARM 165-520</option>
            <option value="165-670">ARM 165-670</option>
            <option value="165-820">ARM 165-820</option>
            <option value="165-920">ARM 165-920</option>
            <option value="180-520">ARM 180-520</option>
            <option value="180-670">ARM 180-670</option>
            <option value="180-820">ARM 180-820</option>
            <option value="180-920">ARM 180-920</option>
            <option value="200-520">ARM 200-520</option>
            <option value="200-670">ARM 200-670</option>
            <option value="200-820">ARM 200-820</option>
            <option value="200-920">ARM 200-920</option>
          </select>
        </td>
        <td>
          <select>
            <option value="">Perf Type</option>
            <option value="dd">DD</option>
            <option value="7d">7D</option>
            <option value="5s">5S</option>
            <option value="dmd">DMD</option>
          </select>
        </td>
        <td>
          <select>
            <option value="">Length</option>
            <option value="675">675</option>
            <option value="775">775</option>
            <option value="875">875</option>
            <option value="975">975</option>
            <option value="1075">1075</option>
            <option value="1175">1175</option>
            <option value="1275">1275</option>
            <option value="1375">1375</option>
            <option value="1475">1475</option>
            <option value="1575">1575</option>
            <option value="1675">1675</option>
            <option value="1775">1775</option>
            <option value="1875">1875</option>
            <option value="1975">1975</option>
            <option value="2075">2075</option>
            <option value="2175">2175</option>
            <option value="2275">2275</option>
            <option value="2375">2375</option>
            <option value="2475">2475</option>
            <option value="2575">2575</option>
            <option value="2675">2675</option>
            <option value="2775">2775</option>
            <option value="2875">2875</option>
            <option value="2975">2975</option>
            <option value="3075">3075</option>
            <option value="3175">3175</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>

  <button type="button" onclick="displayResult()">Insert Another Row</button><br><br>
</div>

<script type="text/javascript">
  function displayResult() {
    document.getElementById("lst-table").insertRow(-1).innerHTML = '<td>1</td><td>2</td><td>3</td>'
  }
</script>

当前效果

产品订购表格

解决方案

方法1：克隆现有行（最省心的方式）

直接复制表格里已有的行结构，后续修改下拉框选项时，新增的行会自动同步，不用重复改代码：

function displayResult() {
  // 获取tbody里的第一行作为模板
  const templateRow = document.querySelector('.lst-tbody tr');
  // 深克隆整行（true表示复制所有子元素）
  const newRow = templateRow.cloneNode(true);
  // 把新行追加到tbody末尾
  document.querySelector('.lst-tbody').appendChild(newRow);
}

方法2：直接写入下拉框HTML

如果需要单独控制新增行的内容，可以把下拉框的完整HTML写到innerHTML里：

function displayResult() {
  const newRow = document.getElementById("lst-table").insertRow(-1);
  newRow.innerHTML = `
    <td>
      <select>
        <option value="">Model Ref.</option>
        <option value="145-520">ARM 145-520</option>
        <option value="145-670">ARM 145-670</option>
        <option value="145-820">ARM 145-820</option>
        <option value="145-920">ARM 145-920</option>
        <option value="165-520">ARM 165-520</option>
        <option value="165-670">ARM 165-670</option>
        <option value="165-820">ARM 165-820</option>
        <option value="165-920">ARM 165-920</option>
        <option value="180-520">ARM 180-520</option>
        <option value="180-670">ARM 180-670</option>
        <option value="180-820">ARM 180-820</option>
        <option value="180-920">ARM 180-920</option>
        <option value="200-520">ARM 200-520</option>
        <option value="200-670">ARM 200-670</option>
        <option value="200-820">ARM 200-820</option>
        <option value="200-920">ARM 200-920</option>
      </select>
    </td>
    <td>
      <select>
        <option value="">Perf Type</option>
        <option value="dd">DD</option>
        <option value="7d">7D</option>
        <option value="5s">5S</option>
        <option value="dmd">DMD</option>
      </select>
    </td>
    <td>
      <select>
        <option value="">Length</option>
        <option value="675">675</option>
        <option value="775">775</option>
        <option value="875">875</option>
        <option value="975">975</option>
        <option value="1075">1075</option>
        <option value="1175">1175</option>
        <option value="1275">1275</option>
        <option value="1375">1375</option>
        <option value="1475">1475</option>
        <option value="1575">1575</option>
        <option value="1675">1675</option>
        <option value="1775">1775</option>
        <option value="1875">1875</option>
        <option value="1975">1975</option>
        <option value="2075">2075</option>
        <option value="2175">2175</option>
        <option value="2275">2275</option>
        <option value="2375">2375</option>
        <option value="2475">2475</option>
        <option value="2575">2575</option>
        <option value="2675">2675</option>
        <option value="2775">2775</option>
        <option value="2875">2875</option>
        <option value="2975">2975</option>
        <option value="3075">3075</option>
        <option value="3175">3175</option>
      </select>
    </td>
  `;
}

方法3：使用HTML模板（更规范的工程化方式）

把行结构放到<template>标签里，实现结构与逻辑分离，维护更方便：
首先在HTML里添加模板：

<template id="row-template">
  <tr>
    <td>
      <select>
        <option value="">Model Ref.</option>
        <option value="145-520">ARM 145-520</option>
        <!-- 其他选项和原行一致 -->
      </select>
    </td>
    <td>
      <select>
        <option value="">Perf Type</option>
        <option value="dd">DD</option>
        <!-- 其他选项和原行一致 -->
      </select>
    </td>
    <td>
      <select>
        <option value="">Length</option>
        <option value="675">675</option>
        <!-- 其他选项和原行一致 -->
      </select>
    </td>
  </tr>
</template>

然后修改JS函数：

function displayResult() {
  const template = document.getElementById('row-template');
  const newRow = template.content.cloneNode(true);
  document.querySelector('.lst-tbody').appendChild(newRow);
}

内容的提问来源于stack exchange，提问作者alistair.oakes

使用JavaScript添加含相同下拉框的表格行

现有代码 #

当前效果 #

解决方案 #

方法1：克隆现有行（最省心的方式） #

方法2：直接写入下拉框HTML #