如何使用JavaScript为HTML表格新增列的单元格插入可操作下拉列表

• 调整新增列时的单元格渲染逻辑，区分表头行（第0行）和数据行：表头行直接渲染Group+序号的文本，数据行渲染下拉选择组件
• 数据行的单元格通过createElement创建<select>元素，若需要支持多选和取消选择，给select添加multiple属性即可，再按需插入下拉选项
• 不需要额外修改原有CSS和HTML结构，仅调整JS逻辑即可

JavaScript代码 #

let groupNum = 1;
const tableEl = document.getElementById('member_table');
// 下拉选项配置，可按需修改
const selectOptions = ['选项1', '选项2', '选项3', '选项4'];

// append column to the HTML table
function appendColumn() {
  // 循环遍历所有行
  for (let i = 0; i < tableEl.rows.length; i++) {
    const newCell = tableEl.rows[i].insertCell(tableEl.rows[i].cells.length);
    // 第0行是表头行，直接渲染分组名称
    if (i === 0) {
      newCell.textContent = 'Group' + groupNum;
    } else {
      // 数据行渲染下拉框
      const select = document.createElement('select');
      // 加上multiple属性支持多选、取消选择，不需要多选的话删掉这行即可
      select.setAttribute('multiple', true);
      // 插入所有选项
      selectOptions.forEach(optText => {
        const option = document.createElement('option');
        option.value = optText;
        option.textContent = optText;
        select.appendChild(option);
      });
      newCell.appendChild(select);
    }
  }
  groupNum++;
}

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;
}

HTML代码（无修改） #

<h2>HTML Table</h2>

<table id="member_table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button onclick="javascript:appendColumn()">Add column</button>

• 不需要多选功能的话，删除select.setAttribute('multiple', true)这行即可，单选下拉点击其他区域就会自动收起，也支持重新选择替换原有选项
• 下拉选项可以直接修改selectOptions数组自定义内容，也可以根据业务需求动态生成

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