0

我有以下代码向表(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) 代码返回整个数组而不过滤结果。

我真的很感激任何帮助

4

0 回答 0