如何为HTML表格新增列的单元格添加可交互的dropdownlist下拉列表

解决方案 #

你只需要调整JS逻辑，区分表头行和数据行，数据行不再生成纯文本，改为生成下拉选择框即可，修改后的完整代码如下：

调整后的JavaScript代码

let groupNum = 1;
const tableEl = document.getElementById('member_table');
// 下拉框可选值，可根据需求自行增减修改
const dropdownOptions = ['', '选中', '取消选中'];

function appendColumn() {
  // 遍历表格所有行
  for (let i = 0; i < tableEl.rows.length; i++) {
    const newCell = tableEl.rows[i].insertCell(tableEl.rows[i].cells.length);
    // 第一行为表头，直接设置分组名称
    if (i === 0) {
      newCell.textContent = 'Group' + groupNum;
    } else {
      // 非表头行生成下拉选择组件
      const selectEl = document.createElement('select');
      selectEl.className = 'col';
      // 批量生成下拉选项
      dropdownOptions.forEach(optText => {
        const opt = document.createElement('option');
        opt.value = optText;
        opt.textContent = optText;
        selectEl.appendChild(opt);
      });
      newCell.appendChild(selectEl);
    }
  }
  groupNum++;
}

可选CSS优化（适配下拉框样式）

可以在原有CSS基础上新增以下规则，让下拉框和表格样式更适配：

select.col {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-sizing: border-box;
}

HTML代码

原有HTML代码无需修改，保持原样即可。

修改后点击「Add column」按钮新增列时，表头会自动按Group1、Group2的规则递增命名，数据行的单元格会自动生成支持选择、取消选择的下拉列表，符合预期效果。

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