将数据从动态表html收集到纯js中的json

Question

我需要帮助从表中收集数据，我有一个动态表，它从 <select> 标记中的选定项目中添加一行，该行是使用以下参数创建的

function addRow(selectAnswer) {
 const empTab = document.getElementById('empTable');
 let rowCnt = empTab.rows.length;
 let tr = empTab.insertRow(rowCnt); 
 for (let c = 0; c < HeaderTable.length; c++) {
  let td = document.createElement('td'); 
  td = tr.insertCell(c);
  if (c == 0) {
   let button = document.createElement('button');
   button.textContent = "Удалить";
   button.setAttribute('id', selectAnswer);
   button.setAttribute("class", "clearBtn")
   button.setAttribute("onclick", "addSelect(this)")
   td.appendChild(button);
} else if (c == 1) {
   let ele = document.createElement('span');
   ele.textContent = selectAnswer
   td.appendChild(ele);
} else {
   let ele1 = document.createElement("input");
   ele1.setAttribute("type", "number")
   td.appendChild(ele1)
  };
 }
}

当您单击“计算”按钮时，每行都应以 JSON 格式收集并进一步发送，

我收集数据如下

let btn = document.getElementById("btn").addEventListener("click", () => {
 let database = []
 const table = document.getElementById("empTable")
  for (let i = 1; row = table.rows[i]; i++) {
   database.push({ name: row.cells[1], massa: row.cells[2], W: row.cells[3], A: row.cells[4] })
 }
     console.log(database)
     calck(database)
 })

结果我得到了

enter image description here

但我不知道如何从span 中收集标题和 input 中的所有值，而不是从表格中收集单元格 (td)

Answer 1

如果您返回td，则意味着您必须首先访问属性firstChild。从这里，您应该得到value（来自input 标签）或innerText（来自span）。请注意，这些 slice(1) 用于从数组中删除位置 0。看看：

const keys = ["name","massa","W","A"]
const table = document.getElementById("empTable")
let database = [];

const fillDatabase = () => {
  let getTdContent = (td) => (td.firstChild.value || td.firstChild.innerText);
  [...table.rows]
    .slice(1)
    .forEach(row => {
      let obj = {};
      [...row.cells]
        .slice(1)
        .forEach((td,index) => obj[keys[index]] = getTdContent(td))
      database.push(obj)
    })
}

const input = document.querySelector('#input')
input.onclick = () => {
  fillDatabase();
  console.log(database);
  database = []
}
 

<div id="table">
  <table id="empTable">
    <tbody>
      <tr>
        <th></th>
        <th>Название</th>
        <th>Масса,Т</th>
        <th>Влажность</th>
        <th>Зольность</th>
      </tr>
      <tr>
        <td><button id="Тестиль" class="clearBtn" onclick="addSelect(this)">Удалить</button></td>
        <td><span>Тестиль</span></td>
        <td><input type="number"></td>
        <td><input type="number"></td>
        <td><input type="number"></td>
      </tr>
    </tbody>
  </table>
</div>
<input id='input' type='submit' placeholder='Calculate'>