纯JS提取动态HTML表格span与input值转JSON的问题求助

问题原因 #

你当前的代码直接将td单元格DOM对象存入了结果数组，没有提取单元格内对应子元素的内容，因此得到的都是单元格对象而非实际数据。

修正后实现代码 #

let btn = document.getElementById("btn").addEventListener("click", () => {
  let database = []
  const table = document.getElementById("empTable")
  // 遍历表格行（跳过表头所以i从1开始）
  for (let i = 1; row = table.rows[i]; i++) {
    database.push({ 
      // 提取第二列span的文本内容
      name: row.cells[1].querySelector('span').textContent, 
      // 提取后续列input的输入值，用Number转为数值类型，不需要可以去掉
      massa: Number(row.cells[2].querySelector('input').value), 
      W: Number(row.cells[3].querySelector('input').value), 
      A: Number(row.cells[4].querySelector('input').value)
    })
  }
  // 如果需要发送JSON格式，直接用JSON.stringify转换即可
  console.log(JSON.stringify(database))
  calck(database)
})

可选容错优化 #

如果担心特殊情况子元素不存在导致报错，可以加上可选链操作符避免代码中断：

name: row.cells[1].querySelector('span')?.textContent || '',
massa: Number(row.cells[2].querySelector('input')?.value) || 0,
W: Number(row.cells[3].querySelector('input')?.value) || 0,
A: Number(row.cells[4].querySelector('input')?.value) || 0,

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