Javascript Jquery Datatable如何编辑、保存和添加新行

我正在尝试将表1中的行设置为可编辑行，我也想添加一个新行

我发现这个样品很好用。但我不能申请我的样品

我将工作示例粘贴为下面的代码片段

函数addUser（）{
var$source=$（“#示例2”）.DataTable（）；
变量名称=$（$source.rows（）.nodes（））
.filter（':has（：checked'））
.map（函数（）{
返回$（this.children（）.first（）.text（）；
}).toArray（）；
console.log（名称）；
var$rows=$source.rows（函数（i，数据）{
返回names.indexOf（“”+data.name）！=-1；
});
var data=$rows.data（）；
如果（data.length>0）{
$rows.remove（）.draw（）；
$（“#示例”）.DataTable（）.rows.add（data.toArray（））.draw（）；
}
}
函数checkAll（检查）{
$（'chk'）.prop（'checked'，check==1）；
var$source=$（“#示例2”）.DataTable（）；
变量名称=$（$source.rows（）.nodes（））
.find（'input[type=“checkbox”]”）
.每个（功能（i，el）{
el.checked=check==1；
});
返回false；
}
函数all（）{
var a=0；
var$source=$（“#示例2”）.DataTable（）；
变量名称=$（$source.rows（）.nodes（））
.find（'input[type=“checkbox”]”）
.每个（功能（i，el）{
如果（标高已勾选）{
a++
}
控制台日志（a）；
});
如果（a==5）{
$（'chk'）.prop（'checked'，true）；
}否则{
$（'chk'）.prop（'checked'，false）；
}
}
$（文档）.ready（函数（）{
var dt=$（'#示例'）.dataTable（）；
dt.fn（）；
});
$（文档）.ready（函数（）{
var url='1〕http://www.json-generator.com/api/json/get/cvQJpCWCuW?indent=2';
变量表=$（'#示例'）。数据表({
ajax:url，
createdRow：函数（行、数据、数据索引）{
$（行）.attr（'id'，'row-'+数据索引）；
},
行重新排序：{
dataSrc:'命令'，
},
栏目：[{
数据：“名称”
}, {
数据：“名称”
}, {
数据：“地点”
}]
});
table.rowroreordering（）；
});
$（文档）.ready（函数（）{
var dt=$（'#示例2'）.dataTable（）；
dt.fn（）；
});
$（文档）.ready（函数（）{
var url='1〕http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2';
变量表=$（'#示例2'）。数据表({
ajax:url，
createdRow：函数（行、数据、数据索引）{
$（行）.attr（'id'，'row-'+数据索引）；
},
行重新排序：{
dataSrc:'命令'，
},
栏目：[{
数据：“名称”
}, {
数据：“复选框”
}]
});
table.rowroreordering（）；
});
$（文档）.ready（函数（）{
$（'example2'）。在（'click'，'input[type=“checkbox”]”上，函数（）{
全部（）；
});
$（'body'）。在（'mouseenter'，'input'，function（）上{
$（'.btn'）.prop（'disabled'，true）；
});
$（'body'）。在（'mouseout'，'input'，function（）上{
$（'.btn'）.prop（'disabled'，false）；
});
$（'#chk'）。on（'change'，function（）{
log（$（this））；
如果（$（此）[0]。已选中）{
checkAll（1）；
}否则{
checkAll（0）；
}
});
$（'#checkAll'）。单击（函数（）{
checkAll（1）；
});
$（“#取消选中”）。单击（函数（）{
checkAll（0）；
});
$（'#btnAddUser'）。单击（函数（）{
addUser（）；
});
});





表1




名字
放置
命令




表2




放置
复选框
添加用户
选择全部或无

全部
没有

我使用datatables和jquery制作了一个完全可编辑的表（添加、编辑、删除）。如果你想玩它，它就在这里。我有一个版本使用了复选框，但是这个版本使用了select rows扩展设置为single row

   var dataObject = null;

    $(document).ready(function () {
        var table = $('#example').DataTable({
            buttons: [{
              text: "Edit", className :"editButton",
                extend: "selectedSingle",
                action: function (e, dt, bt, config) { editRow(e, dt, bt, config); }
            }, {
                text: "Save",
                extend: "selectedSingle",
                action: function (e, dt, bt, config) { saveRow(e, dt, bt, config); }
            }, {
                text: "Add",
                action: function (e, dt, bt, config) { addRow(e, dt, bt, config); }
            }, {
                text: "Delete",
                extend: "selectedSingle",
                action: function (e, dt, bt, config) { removeRow(e, dt, bt, config); }
            }],
            dom: "Btp",
            select: "single"
        });

        var dataObject = table.rows().data();

        // keep the rows from deselection when you click on a textbox
        // this means you have to click between textboxes to change edit rows when more than one is onpen
        $("#example").on("click", "input", function (e) { e.stopPropagation(); return false; });

        table.on('user-select', function (e, dt, type, cell, originalEvent) {
            if ($('#example input').length > 0) {
                e.preventDefault();
                return false;
            }
        });
    });

    // Adds a new row in edit mode
    function addRow(e, dt, bt, config) {
        if ($('#example input').length > 0) {
            // only one row is allowed to be in edit mode at a time
            return false;
        }
        var $nr = dt.row.add(["", "", "", "", "", ""]).draw(false).nodes().to$();
      $nr.addClass("newRow");
        dt.rows($nr).select();
        $nr.children("td").each(function (i, it) {
            $(it).append("<input type='text'>");
        });
      $(".editButton span").text("Cancel");
      // Puts 
      dt.page("first").draw();
    }

     function removeRow(e, dt, bt, config){
          var r = dt.rows(".selected").nodes()[0];
       var n = $("td:first", r).text();
       if(!confirm("You are about to remove " + n)){return;}
        dt.rows(".selected").remove().draw();
     }

    // Save the selected row (assuming its in edit mode)
    function saveRow(e, dt, bt, config) {
        var r = dt.rows(".selected").nodes()[0];

        // if row is not edit mode, just return.
        if ($("input", r).length === 0) { return; }


        var d = dt.rows(".selected").data()[0];
        var containsText = false;
        $(r).children("td").each(function (i, it) {
            var di = $("input", it).val();
            if (di.length > 0) { containsText = true; }
            $(it).html(di);
            d[i] = di;
        });
        if (!containsText) {
            alert("This row contains no data and will be removed");
            dt.rows(".selected").remove().draw();
        }
      $(".editButton span").text("Edit");
    }

    // Puts a row in edit mode
    function editRow(e, dt, bt, config) {
       var r = dt.rows(".selected").nodes()[0];
     if(  $("span", bt[0]).text() == "Cancel"){

       if($(r).hasClass("newRow")){
          dt.rows(".selected").remove().draw();
       }
       else {
       $(r).children("td").each(function (i, it) {
            var od = dt.cells(it).data();
            $(it).html(od[0]);
        });
       } 

       $("span", bt[0]).text("Edit");
       return;
     }

        // if row already in edit mode, just return.
        if ($("input", r).length > 0) { return; }

        $(r).children("td").each(function (i, it) {
            var h = $("<input type='text'>");
            h.val(it.innerText);
            $(it).html(h);
        });
      $("span", bt[0]).text("Cancel");
    }

var-dataObject=null；
$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
按钮：[{
文本：“编辑”，类名：“编辑按钮”，
扩展：“selectedSingle”，
动作：函数（e，dt，bt，config）{editRow（e，dt，bt，config）；}
}, {
文字：“保存”，
扩展：“selectedSingle”，
操作：函数（e，dt，bt，config）{saveRow（e，dt，bt，config）；}
}, {
文本：“添加”，
动作：函数（e，dt，bt，config）{addRow（e，dt，bt，config）；}
}, {
文本：“删除”，
扩展：“selectedSingle”，
动作：函数（e，dt，bt，config）{removeRow（e，dt，bt，config）；}
}],
dom:“Btp”，
选择“单个”
});
var dataObject=table.rows（）.data（）；
//单击文本框时，不要取消选择行
//这意味着当多个文本框处于打开状态时，您必须在文本框之间单击以更改编辑行
$（“#示例”）。在（“单击”，“输入”，函数（e）{e.stopPropagation（）；返回false；}）上；
表.on（'user-select'，函数（e、dt、类型、单元格、原始事件）{
如果（$（'#示例输入'）。长度>0）{
e、 预防默认值（）；
返回false；
}
});
});
//在编辑模式下添加新行
函数addRow（e、dt、bt、config）{
如果（$（'#示例输入'）。长度>0）{
//一次只能有一行处于编辑模式
返回false；
}
var$nr=dt.row.add（[“”、“”、“”、“”、“”、“”、“”、“”）]）.draw（false）.nodes（）到$（）；
$nr.addClass（“纽罗”）；
dt.rows（$nr）.select（）；
$nr.children（“td”）。每个（功能（i，it）{
$（it）。追加（“”）；
});
$（“.editButton span”）.text（“取消”）；
//放置
dt.page（“第一”）.draw（）；
}
函数（e、dt、bt、配置）{
var r=dt.rows（“.selected”）.nodes（）[0]；
var n=$（“td:first”，r）.text（）；
如果（！confirm（“您将要删除”+n））{return；}
dt.rows（“.selected”）.remove（）.draw（）；
}
//拯救
 $('#addRow').click(function() { 

        var rowsHtml; 
        var $newRowTemplate = $("#newRow").find("tr");

        table2.rows().every(function(rowIdx, tableLoop, rowLoop) {

          var row = this.node();
          var isChecked = $(row).find("input[type='checkbox']").prop("checked");

          if (isChecked) {
            $newRowTemplate.find("td:first").text(table.rows().count() + 1);
            $newRowTemplate.find("input[name='name']").attr("value",this.data().name);
            $newRowTemplate.find("input[name='country']").attr("value","Some Country");

            rowHtml = $newRowTemplate[0].outerHTML;  
            table.row.add($(rowHtml)).draw();

            $(row).addClass("remove");

          }

        });

        table2.rows(".remove").remove().draw();

      });

 $("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {

        $(this).removeClass().addClass("fa fa-pencil-square");

        var $row = $(this).closest("tr");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).find("input").val();
          $(this).html(txt);

          //This is where I update the cell data with the new value
          table.cell(this).data(txt);
        });

        var $firstTdSelect = $row.find("td:first");
        var selectValue = $firstTdSelect.find("select").val();
        $row.find("td:first").html(selectValue);

        //This is where I update the cell data with the new value            
        table.cell($firstTdSelect).data(selectValue);

      });