링크 작업이 올바르지 않습니다.

Question

편집 및 삭제 링크가있는 데이터 테이블에 여러 행을 추가하고 있습니다. 제 3 행을 삭제 한 후 그 시간에 5 행을 편집하면 삭제라는 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>" ])