将数据从动态表html收集到纯js中的json
将数据从动态表html收集到纯js中的json
提问于 2021-08-22 13:05:57
我需要帮助从表中收集数据，我有一个动态表，它从<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)
})结果我得到了
但是我不知道如何从span中收集标题，从input中收集所有值，而不是从表中收集单元格(td
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-22 14:37:05
如果返回td，则意味着您必须首先访问attribute 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'>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68881605
复制相关文章
相似问题
腾讯云开发者
