我有以下代码将一行添加到表(UI)和数据数组
.box-orange {
background-image: url("/img/fundo2.png");
height: 400px;
color: white;
margin-top: 10%;
margin-bottom: 10%;
}
.second-section img {
height: 550px;
margin-top: -10%;
margin-left: 2%;
object-fit: cover;
}
.second-section h3 {
font-size: 2.5em;
margin-bottom: 5%;
}
.second-section.line {
width: 80%;
border: 2px solid #77d3c2;
position: absolute;
left: 33%;
top: 100%;
}
.second-section p {
font-size: 1.4em;
padding: 0% 10%;
}
.textdiv {
margin-left: 3rem;
}
@media only screen and (max-width: 800px) {
.second-section img {
height: unset;
margin-left:unset;
}
.textdiv {
margin-left:0px;
}
}
但是,当我尝试实现deleteData时 方法,过滤器功能不起作用,返回错误:“ ReferenceError:未定义el”
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";
};
console.log(devices)代码返回整个数组,而不进行过滤。
我将非常感谢您的帮助