使用jquery编辑和删除数据表中的行功能？

Question

我必须使用数据表和引导程序设计一个表视图，它具有以下视图

我使用以下代码

将值添加到表中

function updateTable(){
     var content = $.ajax(
      {
       url:"http://192.168.1.2:8080/alpharithm/employee/employeeDetails",
       dataType:"json",
        type:"GET",            


        success : function(data) {



         var arr1= [];
            var arr= new Array();
            $.each( data, function(i, obj) {
                     arr = obj;
                     arr1.push(arr);

            });

        console.log(arr1[0]);       



         $('#employeeTable').dataTable( {

          "aaData":arr1,
          "destroy":true,
           /*"columns": [
              { "data": "employee_id" },
              { "data": "division" },
              { "data": "first_name" },
              { "data": "mobile_number" },
              { "data": "home_number" },
              { "data": "company_mail" },
              { "data": "personal_mail" },
              { "data": "date_of_birth" },
              { "data": "date_of_joining" },
              { "data": "blood_group" },
              { "data": "emergency_contact" },
              { "data": "emergency_phone" },
              { "data": "permanent_address" },
              { "data": "current_address" },
              { "data": "bank_name" },
              { "data": "bank_branch" },
              { "data": "banck_account_no" },
              { "data": "pancard_no" },
              { "data": "" },
              { "data": "" }

              ],*/
           "aoColumns": [{
              "sWidth": "5%",
            "mData": "employee_id"
              }, {
            "sWidth": "5%",
            "mData":  "division"
              }, {
            "sWidth": "5%",
            "mData": "first_name",
            "mRender":function(data, type, full){
                  return full.first_name +" "+ full.last_name ;
                   }
              }, {
            "sWidth": "5%",
            "mData": "mobile_number"
              }, {
            "sWidth": "5%",
            "mData": "home_number"
              }, {
            "sWidth": "5%",
            "mData": "company_mail"
              },{
            "sWidth": "5%",
            "mData": "personal_mail"
              },{
            "mData": "date_of_birth"
              }, {
            "sWidth": "5%",
            "mData":  "date_of_joining"
              }, {
            "sWidth": "5%",
            "mData": "blood_group"
              }, {
            "sWidth": "5%",
            "mData": "emergency_contact"
              }, {
            "sWidth": "5%",
            "mData": "emergency_phone"
              }, {
            "sWidth": "5%",
            "mData": "permanent_address"
              },{
            "sWidth": "5%",
            "mData": "current_address"
              },{
            "sWidth": "5%",
            "mData": "bank_name"
              },{
            "sWidth": "5%",
            "mData": "bank_branch"
              }, {
            "mData": "banck_account_no"
              }, {
            "sWidth": "5%",
            "mData":  "pancard_no"
              },
                          {
            "mData": null,
            "bSortable": false,
            "mRender": function(data, type, full) {
              return '<img class="img-table" src="images/user.png" alt="image">';
                            }
              },  
              {
            "mData": null,
            "bSortable": false,
            "mRender": function(data, type, full) {
              return '<a class="btn btn-info btn-sm" id="editTableBtn" href="#" >Edit</a>&nbsp<a id="deleteTableBtn" class="btn btn-info btn-sm">Delete</a>';
            }
              }],
           "iDeferLoading": 57
           });


        }


      });

  }

我想分别编辑，删除和编辑每一行。我尝试了很多方法，但编辑删除不起作用。如何单独编辑和删除行？提前致谢。

Answer 1

 $('#employeeTable a.delete').on('click', function(e) {

以上行无效，因为删除按钮是动态创建的，您可以使用

 $('#employeeTable').on('click', 'a.delete', function(e) {

代替

此外，您的删除和编辑按钮位于详细信息面板内，您不能只使用

var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);

删除整个记录，因为nRow只是扩展的详细信息面板，如果你使用chrome inspector / firebug进行调查，你会看到，一旦你点击了＆＃34; +＆＃34;细节按钮，一个与班级＆＃34;孩子＆＃34;将附加到您的目标行。

您可以尝试的解决方案之一是

$('#employeeTable').on('click', 'a.delete', function(e) {
    e.preventDefault();
    var nRow = $(this).parents('tr')[0];
    var parent = $(nRow).prev();
    oTable.fnDeleteRow(parent);
}); 

我想除了使用$（nRow）.prev（）获取其父行之外，可能会有更好的方法

演示链接： http://jsfiddle.net/s5k4hL0v/