在纯 js 中从动态 table html 到 json 收集数据

Question

我需要帮助从 table 收集数据，我有一个动态 table，它从 <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 中收集所有值，而不是从 [=33] 中收集单元格 (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'>

在纯 js 中从动态 table html 到 json 收集数据

collect data from dynamic table html to json in pure js

html

javascript

json

html-table