如何使用querySelector获取HTML表格中的输入框值？

你代码中获取输入框值的逻辑存在错误：c.querySelectorAll('input').value 无法正确拿到值，因为 querySelectorAll() 返回的是NodeList节点列表，并非单个DOM元素，而节点列表没有value属性，所以你得到的是空值。

修正后的代码 #

function savePo() {
  let table = document.getElementById("dtable");
  let [, ...tr] = table.querySelectorAll("tr");
  let tableData = [...tr].map(r => {
    let td = r.querySelectorAll("td");
    return [...td].map((c, j) => 
      j == 9 ? c.querySelector('input[type="checkbox"]').checked : 
      j === 8 ? c.innerText : 
      c.querySelector('input')?.value || ''
    );
  });
  console.log('Table Data: ', tableData);
}

关键修改点 #

• 用querySelector('input')替代querySelectorAll('input')，直接获取当前td下的单个输入框元素（你的表格结构中每个对应td只有一个输入框）；
• 加入?.可选链操作符，避免某个td无输入框时触发报错；
• 用|| ''兜底，确保无输入框或输入框为空时返回空字符串，避免出现undefined。

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