javascript - ajax获取数据后动态生产的表格怎么删除指定行?

Question

从后台获取的数据，和前端输入的数据做的一个拼接临时存在数组里面，然后以表格的形式将数组显示在页面上，怎么实现单击删除，就删除页面行和数组里面的数据同时删除啊？想法是传当前单击的对象，然后通过对象去查当行的数据，但是这种我连this怎么传都不知道

    $.ajax({
                    url:'http://localhost:8081/boot/v1/goods/selectPNum',
                    type:'post',
                    data:{"pNumber":pNumber},
                    success:function(data){
                        var str=""
                        c=[pNumber,products,data.data[0].pprice,pNum]
                        
                        str+="<tr>"
                        str+="<td>"+pNumber+"</td>"
                        str+="<td>"+products+"</td>"
                        str+="<td>件</td>"
                        str+="<td>"+data.data[0].pprice+"</td>"
                        str+="<td>"+pNum+"</td>"
                        str+="<td><a href='javascript:;' onclick='del("+this+")'>删除</a></td></tr>"
                        tbody.append(str);
                        arry.push(c);
                        console.log(arry)
                        }
            })

试过一些网上的方法,要么就是删的不对,要么就是不生效,感觉可能是我传参问题,没找到类似这种的表格选中删除

Answer 1

重要的事情说三遍：要封装成方法！要封装成方法！要封装成方法！
方法1：提出来的代码封装为方法，删除后重新调用该方法，方法类似:

function 方法(目标tbody) {
    执行ajax查询
    得到数据后清理tbody
    遍历数据重新填充tbody
}

方法2：拆分为两个方法，一个是数据拉取，一个是渲染。

function 异步方法用来获得数据(){}
function 渲染tbody(指定的tbody，数据) {
    清理tbody
    遍历数据重新填充tbody
}
const data = await 异步方法用来获得数据();
渲染tbody(指定的tbody，data);

function 异步删除行(行，数据) {
    await 删除
    从数据中删除行（这样可以减少一次拉取）
    渲染tbody(指定的tbody，data);
}

Answer 2

为每行添加一个唯一的标识符（例如使用一个隐藏的 <td> 或者 <input> 元素），以便于定位到具体的行。具体代码如下：

var arry = [];

// AJAX 请求
$.ajax({
    url: 'http://localhost:8081/boot/v1/goods/selectPNum',
    type: 'post',
    data: {"pNumber": pNumber},
    success: function (data) {
        var str = "";
        var rowId = "row_" + pNumber; // 生成一个唯一的行标识符
        var c = [pNumber, products, data.data[0].pprice, pNum];

        str += "<tr id='" + rowId + "'>";
        str += "<td>" + pNumber + "</td>";
        str += "<td>" + products + "</td>";
        str += "<td>件</td>";
        str += "<td>" + data.data[0].pprice + "</td>";
        str += "<td>" + pNum + "</td>";
        str += "<td><a href='javascript:;' onclick='del(\"" + rowId + "\")'>删除</a></td>";
        str += "</tr>";

        $("#tbody").append(str); // 假设您的表格的 tbody 元素有一个 id 为 "tbody"
        arry.push(c);
        console.log(arry);
    }
});

// 删除函数
function del(rowId) {
    // 通过 ID 找到相应的行并删除
    $("#" + rowId).remove();
}