我有每页显示数百行的表，每行都有用户可以更改的输入.我想只发送更新的数据到后端，这样就不会发送太多的数据.在顶部有一个"保存更改"按钮.
我当前没有使用表单元素(所以不发送整个表格)
我所做的是，我将数据库中的行id作为dataset属性分配给每个<tr>，并监听输入的更改，然后如果一行的一个值发生更改，我会将整个行及其输入添加到一个对象中，该对象保存所有更改的行.然后将该对象发送到后端
let updatedData = {};
let table1Form = document.querySelector('#table_1');
table1Form.addEventListener("change", (event) => {
let row = event.target.closest('tr');
let rowId = row.dataset.dbRowId;
let rowInputs = row.querySelectorAll('input');
updatedData[rowId] = {};
rowInputs.forEach((input) => {
if (input.type === "checkbox") {
updatedData[rowId][input.name] = input.checked;
} else {
updatedData[rowId][input.name] = input.value;
}
});
});
document.querySelector("#save-changes").addEventListener("click", () => {
console.log(updatedData);
});<button id="save-changes">Save Changes</button>
<table id="table_1">
<tr data-db-row-id="1">
<td><input type="text" name="email" value="foo@example.com" /></td>
<td><input type="text" name="name" value="Foo" /></td>
<td><input type="checkbox" name="show" checked="checked" /></td>
</tr>
<tr data-db-row-id="2">
<td><input type="text" name="email" value="bar@example.com" /></td>
<td><input type="text" name="name" value="Bar" /></td>
<td><input type="checkbox" name="show" /></td>
</tr>
</table>但这感觉很麻烦，我需要判断每种类型的输入(在上面的示例中，我必须区分checkbox和text输入，因为它们的计算方式不同).
也许有一种更好的方法来做到这一点(也许也可以使用表单数据？)