如何获取HTML表格中select列的选中值并正确提取表格数据

你当前代码直接取单元格的textContent属性，会获取该单元格下所有子节点的全部文本拼接结果，因此包含<select>下所有选项的文本，无法单独拿到选中项的值。

遍历单元格时优先判断单元格内是否存在下拉选择框，若存在则直接读取下拉框的选中值，不存在时再读取普通文本内容即可，无需硬编码列索引，适配性更强。

修正后的完整JS代码 #

function save_Table(){
  const myData = document.getElementById('tab').rows;
  const data = [];
  for (let i = 1; i < myData.length; i++) {
    const el = myData[i].children;
    const my_el = [];
    for (let j = 0; j < el.length; j++) {
      const cell = el[j];
      // 查找单元格内的select元素
      const selectDom = cell.querySelector('select');
      if (selectDom) {
        // 下拉框列：取当前选中的value值
        my_el.push(selectDom.value);
        // 如果需要取选中项的显示文本，替换为下行代码即可
        // my_el.push(selectDom.options[selectDom.selectedIndex].textContent.trim());
      } else {
        // 普通列：取单元格文本
        my_el.push(cell.textContent.trim());
      }
    }
    data.push(my_el);
  }
  console.log(data);
}

说明 #

• 原有CSS和HTML代码无需修改，替换JS函数后即可正常运行
• 选中下拉选项后点击按钮，控制台输出的数组中第6、7位（对应数组索引5、6）就是下拉框当前选中的值
• 如果后续调整了下拉框所在的列位置，该代码依然可以正常识别，不需要额外修改

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