我有以下代码向表(UI)和数据数组添加一行
const populateData = (device) => {
document.getElementById("content").insertAdjacentHTML('beforeend',
<tr class='data' id=${device.tt}>
<th scope="row">${device.tt}</th>
<td>${device.ma}</td>
<td>${device.ten}</td>
<td>${device.DVT}</td>
<td>${device.trongLuong}</td>
<td>
<button type="button" class="btn btn-danger" onclick='deleteData(this)'>Xóa</button>
<button type="button" class="btn btn-warning">Sửa</button>
</td>
</tr>)
}
const init = () => devices.forEach(device => {
populateData(device);
});
const addData = () => {
const maSo = document.getElementById("ma-sp").value;
const ten = document.getElementById("ten-sp").value;
const dvt = document.getElementById("dvt").value;
const trongLuong = document.getElementById("trong-luong").value;
if (maSo === '' || ten === '' || dvt === '' || trongLuong === '') {
return;
}
const newData = {
tt: devices.length + 1,
ma: maSo,
ten,
DVT: dvt,
trongLuong
}
devices.push(newData);
return newData;
};
const addDataUI = () => {
// add data to table
const device = addData();
populateData(device);
//close modal
document.querySelector('.bg-modal').style.display = "none";
};
但是,当我尝试实现 deleteData 方法时,过滤器功能不起作用,返回错误:“ReferenceError: el is not defined”
const deleteData = (x) => {
const row = x.parentNode.closest('tr');
//delete device (error is here)
const row = x.parentNode.closest('tr');
devices = devices.filter(el => el !== row.getAtrribute('id'));
console.log(devices);
document.getElementById("devices").deleteRow(x.parentElement.parentElement.rowIndex); }
console.log(devices) 代码返回整个数组而不过滤结果。
我真的很感激任何帮助