如何使用js将修改后的数据添加到表格中
let orderNum = 0;
function confirm() {
const deskInput = document.getElementById('deskInput');
const foodInput = document.getElementById('foodInput');
const quantityInput = document.getElementById('quantityInput');
const priceInput = document.getElementById('priceInput');
const desk = deskInput.value;
const food = foodInput.value;
const quantity = quantityInput.value;
const price = priceInput.value;
const orderTable = document.getElementById('orderTable');
const tbody = orderTable.getElementsByTagName('tbody')[0];
const row = document.createElement('tr');
tbody.appendChild(row);
const cellNum = document.createElement('td');
cellNum.innerHTML = ++orderNum;
row.appendChild(cellNum);
const cellDesk = document.createElement('td');
cellDesk.innerHTML = desk;
row.appendChild(cellDesk);
const cellFood = document.createElement('td');
cellFood.innerHTML = food;
row.appendChild(cellFood);
const cellQuantity = document.createElement('td');
cellQuantity.innerHTML = quantity;
row.appendChild(cellQuantity);
const cellPrice = document.createElement('td');
cellPrice.innerHTML = price;
row.appendChild(cellPrice);
const cellOperation = document.createElement('td');
const deleteButton = document.createElement('button');
deleteButton.innerHTML = '删除';
deleteButton.onclick = function() {
row.remove();
orderNum--;
updateOrderNum();
};
row.appendChild(cellOperation);
const cellnum = document.createElement('td');
const editButton = document.createElement('button');
editButton.innerHTML = '修改'
editButton.onclick = function() {
editRowData(row);
};
cellOperation.appendChild(deleteButton);
cellnum.appendChild(editButton);
row.appendChild(cellnum);
deskInput.value = '';
foodInput.value = '';
quantityInput.value = '';
priceInput.value = '';
}
let editPopup;
function updateOrderNum() {
const orderTable = document.getElementById('orderTable');
const tbody = orderTable.getElementsByTagName('tbody')[0];
const rows = tbody.getElementsByTagName('tr');
for (let i = 0; i < rows.length; i++) {
rows[i].getElementsByTagName('td')[0].innerHTML = i + 1;
}
}
function editRowData(row) {
const desk = row.getElementsByTagName('td')[1].innerHTML;
const food = row.getElementsByTagName('td')[2].innerHTML;
const quantity = row.getElementsByTagName('td')[3].innerHTML;
const price = row.getElementsByTagName('td')[4].innerHTML;
editPopup = window.open('', '_blank');
editPopup.document.body.innerHTML = `
<h3>修改订单</h3>
<table>
<tr>
<td>桌号</td>
<td><input type="text" value="${desk}" id="editDeskInput"></td>
</tr>
<tr>
<td>菜名</td>
<td><input type="text" value="${food}" id="editFoodInput"></td>
</tr>
<tr>
<td>数量</td>
<td><input type="text" value="${quantity}" id="editQuantityInput"></td>
</tr>
<tr>
<td>单价</td>
<td><input type="text" value="${price}" id="editPriceInput"></td>
</tr>
</table>
<button onclick="saveEdit(${row.rowIndex})">保存</button>
<button onclick="editPopup.close()">取消</button>
;
}
function saveEdit(rowIndex) {
const row = document.getElementsByTagName('tr')[rowIndex];
const desk = editPopup.document.getElementById('editDeskInput').value;
const food = editPopup.document.getElementById('editFoodInput').value;
const quantity = editPopup.document.getElementById('editQuantityInput').value;
const price = editPopup.document.getElementById('editPriceInput').value;
row.getElementsByTagName('td')[1].innerHTML = desk;
row.getElementsByTagName('td')[2].innerHTML = food;
row.getElementsByTagName('td')[3].innerHTML = quantity;
row.getElementsByTagName('td')[4].innerHTML = price;
editPopup.close();
updateOrderNum();
}
为什么修改后的数据无法导入表格中哪里错了请指点一下
- 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7526478
- 这篇博客你也可以参考下：js赋值后 改变现有数据会修改原来的数据的解决办法
- 除此之外, 这篇博客: 关于js的浅拷贝和深拷贝遇到的问题中的 实现深拷贝的常见方法： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
//深拷贝对象 let x = {a:1} let y = Object.assign({},x) //方法一 let z = {...x} //方法二 //深拷贝数组 let x = [1,2,3,4] let y = x.slice() //方法一 let z = [...x] //方法二 //上述对象和数组都各自独立但是要注意当对象属性或数组成员是引用类型时，方法拷贝的还是每项的地址
let x = [{a:1}] let y = [...x] y[0].a = 2 console.log(x[0].a) //2这种情况下，上述方法就不可以了，我们可以使用
JSON.parse(JSON.stringify())，但是json不支持函数、undefined、NaN，所以使用JSON方法转换时，对象的函数、NaN属性会被忽略，undefined会被转换为null。可以自己写一个方法递归来实现深拷贝对象,要注意对象有属性是对象本身的情况（循环引用）
function checkedType(target){ return Object.prototype.toString.call(target).slice(8,-1) } function clone (target,copyed = new WeakMap()){ const targetType = checkedType(target) let result = null if(copyed.has(target)){ return target } switch(targetType){ case 'Object':{ result = {} copyed.set(target, target) for(let [key,value] of Object.entries(target)){ result[key] = clone(value,copyed) } break; } case 'Array':{ result = [] copyed.set(target, target) for(let item of target){ result.push(clone(item,copyed)) } break; } default:{ result = target } } return result } let obj = { a:{ x:[1,2,3] } } obj.b = obj let obj2 = clone(obj) console.log(123,obj2)上面只考虑了对象和数组类型，函数、正则、Date没有考虑，使用WeakMap来保存已经拷贝或的对象，防止循环引用。
参考链接：JavaScript深拷贝的一些坑、JS深拷贝总结
- 您还可以看一下 邓继诚老师的零基础JS入门系列课程(4)之JS原生对象精讲课程中的 对象的相关概念小节, 巩固相关知识点
- 以下回答由chatgpt基于相关博客总结生成:
回答：
首先需要注意的是，JavaScript修改表格中的数据后，需要将这些修改后的数据重新添加到表格中，可以采用以下两种方法：
直接修改表格的DOM节点，将修改后的数据插入到对应的单元格中。
将修改后的数据存储在JavaScript对象中，然后重新绘制表格。
如果采用第一种方法，需要找到对应的表格DOM节点以及单元格DOM节点，并将修改后的数据插入到单元格中。可以采用以下方式：
// 假设我们需要修改第一行第一列的单元格数据为"new data" let table = document.querySelector("table"); // 获取表格DOM节点 let tr = table.rows[0]; // 获取第一行DOM节点 let td = tr.cells[0]; // 获取第一列DOM节点 td.innerHTML = "new data"; // 修改单元格数据如果采用第二种方法，需要将修改后的数据存储在JavaScript对象中，并重新绘制表格。可以采用以下方式：
// 假设我们需要修改第一行第一列的单元格数据为"new data" let data = [ // 假设表格数据存在一个data数组中 ["old data 1", "old data 2"], ["old data 3", "old data 4"] ]; data[0][0] = "new data"; // 修改第一行第一列的数据 let table = document.createElement("table"); // 创建新的表格DOM节点 for (let i = 0; i < data.length; i++) { // 遍历表格数据 let tr = document.createElement("tr"); // 创建行DOM节点 for (let j = 0; j < data[i].length; j++) { // 遍历行数据 let td = document.createElement("td"); // 创建列DOM节点 td.innerHTML = data[i][j]; // 设置列数据 tr.appendChild(td); // 将列DOM节点添加到行DOM节点中 } table.appendChild(tr); // 将行DOM节点添加到表格DOM节点中 }需要注意的是，以上两种方法需要根据具体的需求选择。如果修改后的数据需要被保存，第二种方法更为适合，因为它可以将修改后的数据存储在JavaScript对象中，便于后续的使用。如果只是需要实时修改表格数据，可以采用第一种方法。
另外，需要注意在判断JavaScript对象是否为空时，不能简单地使用“===”判断对象是否相等，因为对象在JavaScript中是引用类型，两个对象的地址不同，即使它们的数据相同，也不会相等。可以采用以下方式判断对象是否为空：
let obj = {}; let isEmptyObj = Object.keys(obj).length === 0 && obj.constructor === Object;其中，Object.keys()方法可以获取对象的所有属性名，Object的constructor属性可以获取对象的构造函数。如果一个对象没有属性且构造函数为Object，则认为这个对象为空。需要注意的是，该方法无法判断obj=null或obj=undefined这种情况，需要另外加以判断。
最后需要说明的是，在使用JavaScript修改表格数据后，可能会遇到数据更新不及时的问题，这是因为JavaScript修改数据后，需要重新渲染数据才能在页面中显示出来。可以调用window.location.reload()方法刷新页面，或者使用其他技术手段实现数据更新。