Question

我在datatable中添加了多行，带有编辑和删除链接。假设我删除了第3行，之后编辑了第5行，编辑了名为function的链接，该链接写在删除链接的onclick事件上。我在这里添加代码的添加，编辑和删除功能。

function addproduct() {

    if (document.getElementById("p_barcode").value == "" || wrongdata == false) {
        alert("Please Enter valid value of Barcode..!!!");
        return false;
    } else {
        var barcode = document.getElementById("p_barcode").value;
        var quantity = document.getElementById("p_qnty").value;
        var grossamount = document.getElementById("p_grossamount").value;
        var basetax = document.getElementById("p_basetax").value;
        var additionaltax = document.getElementById("p_additionaltax").value;
        var discount = document.getElementById("p_discount").value;
        var netamount = document.getElementById("p_netamount").value;
        var paidamount = document.getElementById("p_paidamount").value;

        var data = barcode + "," + quantity + "," + grossamount + "," + basetax + "," + additionaltax + "," + discount + "," + netamount + "," + paidamount;

        alert(data);

        var productdata = data.split(',');
        var table = $('#addpurchase').DataTable();

        table.row.add(
        [
        productdata[0],
        productdata[1],
        productdata[2],
        productdata[3],
        productdata[4],
        productdata[5],
        productdata[6],
        productdata[7],
        productdata[8] = "<a href='#' onclick='return rowedit();'> Edit </a> / <a href='#' onclick='return rowdelete();'> Delete </a>"])
            .draw();

        document.getElementById("p_barcode").value = "";
        document.getElementById("p_qnty").value = "1";
        document.getElementById("p_grossamount").value = "";
        document.getElementById("p_basetax").value = "";
        document.getElementById("p_additionaltax").value = "";
        document.getElementById("p_discount").value = "";
        document.getElementById("p_netamount").value = "";
        document.getElementById("p_paidamount").value = "";

        return false;
    }

}

function rowdelete() {

    var table = $('#addpurchase').DataTable();

    $('#addpurchase tbody').on('click', 'a', function () {
        var tr = $(this).closest("tr");
        var rowindex = tr.index();
        //alert(rowindex);
        table.row(rowindex).remove().draw(false);
    });
    return false;

}

function rowedit() {

    var table = $('#addpurchase').DataTable();

    $('#addpurchase tbody').on('click', 'a', function () {
        var tr = $(this).closest("tr");
        var rowindex = tr.index();
        alert(rowindex);
        var fetchdata = table.row(rowindex).data();
        alert(table.row(rowindex).data());

        document.getElementById("p_barcode").value = fetchdata[0];
        document.getElementById("p_qnty").value = fetchdata[1];
        document.getElementById("p_grossamount").value = fetchdata[2];
        document.getElementById("p_basetax").value = fetchdata[3];
        document.getElementById("p_additionaltax").value = fetchdata[4];
        document.getElementById("p_discount").value = fetchdata[5];
        document.getElementById("p_netamount").value = fetchdata[6];
        document.getElementById("p_paidamount").value = fetchdata[7];

        table.row(rowindex).remove().draw(false);

    });
    return false;

}

Answer 1

您正在调用不同的函数，但具有相同的事件侦听器。您需要将代码更改为此并尝试：

使用以下代码替换函数rowedit()和rowdelete()：

$(document).ready(function(){
  $('#addpurchase tbody').on('click', 'a', function() {
    var action = $(this).data('action'); //Or you can use var action = $(this).attr('data-action');
      var tr = $(this).closest("tr");
      var rowindex = tr.index();
      if(action == 'edit'){
            //YOUR EDIT CODE
      }else{
            //YOUR DELETE CODE
      }

  });
});

并在addproduct()函数中更改以下行：

productdata[8] = "<a href='#' data-action='edit'> Edit </a> / <a href='#' data-action='delete'> Delete </a>" ])

链接工作不合适

1 个答案: