Javascript DataTables，添加可编辑列

我需要在我的表中添加一个可编辑列。下面是我当前创建表的方式。数据来自Javascript数组，并且正在更改（这就是为什么我在表定义中使用“destroy:true”）。我希望“数量”列的默认值为1，但允许用户输入自己的编号，然后我需要能够在提交表单时检索该值

var table2 = $('#example').DataTable( {
    select: false,
    data: addedRows,
    destroy: true, 
    columns: [
    { title: "ID" },
    { title: "Name" },
    { title: "Position" },
    { title: "Office" },
    { title: "Extn." },
    { title: "Start date" },
    { title: "Salary" },
    { title: "QTY" }
    ],
    "columnDefs": [{
        className: "ID",
        "targets":[0],
        "visible": false,
        "searchable":false
    }],
    "language": {
        "emptyTable":     "Select items from the table above"
    }
}); 

有人能帮我吗？创建一个可编辑的列，以及在提交时获取数据

谢谢

有两种选择：

使用

datatables

插件（它不是免费的）

表中已有

输入

像这样：

<table id="example">
    <tbody>
        <tr>
            <td><input type="text" value="value1" name="name1"></td>
            <!-- more cells-->
        </tr>
        <tr>
            <td><input type="text" value="value2" name="name2"></td>
            <!-- more cells-->
        </tr>
    </tbody>
</table>

然后数据表将有

输入

。 提交时，您必须阅读变量

name1

。

name#

有两个选项：

使用

datatables

插件（它不是免费的）

表中已有

输入

像这样：

<table id="example">
    <tbody>
        <tr>
            <td><input type="text" value="value1" name="name1"></td>
            <!-- more cells-->
        </tr>
        <tr>
            <td><input type="text" value="value2" name="name2"></td>
            <!-- more cells-->
        </tr>
    </tbody>
</table>

然后数据表将有

输入

。

---

提交时，您必须读取变量

name1

..

name#

我创建了一个函数来编辑列。但首先，您需要为列的

id

添加

data id

，还需要将class

edit tr

添加到可编辑列。按enter按钮时，列数据将保存到数据库中

代码如下：

var getId;
    var putOldValueBack;
    $(document).on("click","tr.odd td.edit-tr",function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $this = $(this);
        if ($this.data('editing')) return;
        var val = $this.text();
        getId = $(this).data("id");
        $this.empty();
        $this.data('editing', true);
        $('<input type="text" class="form-control editfield">').val(val).appendTo($this);
    });

    putOldValueBack = function () {
        $("tr.odd .editfield").each(function(){
            $this = $(this);
            var val = $this.val();
            var $td = $this.closest('td');
            $td.empty().html(val);
            $td.data('editing', false);
            $.ajax({
                url: "YOUR URL TO SAVE THE DATA",
                type: 'post',
                data : {id:getId,mentioned:val}, // add the param
                dataType: 'json'
            });
        });
    };

    $(document).click(function (e) {
        putOldValueBack();
    });

    $(document).on('keypress',function(e) {
        if(e.which == 13) {
            putOldValueBack();
        }
    });

var-getId；
var putOldValueBack；
$（文档）。在（“单击”，“tr.odd td.edit tr”，功能（e）{
e、 预防默认值（）；
e、 停止即时复制（）；
$this=$（this）；
if（$this.data（'editing'））返回；
var val=$this.text（）；
getId=$（this.data（“id”）；
$this.empty（）；
$this.data（'editing'，true）；
$（''）.val（val）.appendTo（$this）；
});
putOldValueBack=函数（）{
$（“tr.odd.editfield”）.each（function（）{
$this=$（this）；
var val=$this.val（）；
var$td=$this.closest（'td'）；
$td.empty（）.html（val）；
$td.数据（'编辑'，错误）；
$.ajax({
url:“保存数据的url”，
键入：“post”，
数据：{id:getId，refered:val}，//添加参数
数据类型：“json”
});
});
};
$（文档）。单击（函数（e）{
putOldValueBack（）；
});
$（文档）.on（'keypress'，函数（e）{
如果（e.which==13）{
putOldValueBack（）；
}
});

我创建了一个函数来编辑列。但首先，您需要为列的

id

添加

data id

，还需要将class

edit tr

添加到可编辑列。按enter按钮时，列数据将保存到数据库中

代码如下：

var getId;
    var putOldValueBack;
    $(document).on("click","tr.odd td.edit-tr",function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $this = $(this);
        if ($this.data('editing')) return;
        var val = $this.text();
        getId = $(this).data("id");
        $this.empty();
        $this.data('editing', true);
        $('<input type="text" class="form-control editfield">').val(val).appendTo($this);
    });

    putOldValueBack = function () {
        $("tr.odd .editfield").each(function(){
            $this = $(this);
            var val = $this.val();
            var $td = $this.closest('td');
            $td.empty().html(val);
            $td.data('editing', false);
            $.ajax({
                url: "YOUR URL TO SAVE THE DATA",
                type: 'post',
                data : {id:getId,mentioned:val}, // add the param
                dataType: 'json'
            });
        });
    };

    $(document).click(function (e) {
        putOldValueBack();
    });

    $(document).on('keypress',function(e) {
        if(e.which == 13) {
            putOldValueBack();
        }
    });

var-getId；
var putOldValueBack；
$（文档）。在（“单击”，“tr.odd td.edit tr”，功能（e）{
e、 预防默认值（）；
e、 停止即时复制（）；
$this=$（this）；
if（$this.data（'editing'））返回；
var val=$this.text（）；
getId=$（this.data（“id”）；
$this.empty（）；
$this.data（'editing'，true）；
$（''）.val（val）.appendTo（$this）；
});
putOldValueBack=函数（）{
$（“tr.odd.editfield”）.each（function（）{
$this=$（this）；
var val=$this.val（）；
var$td=$this.closest（'td'）；
$td.empty（）.html（val）；
$td.数据（'编辑'，错误）；
$.ajax({
url:“保存数据的url”，
键入：“post”，
数据：{id:getId，refered:val}，//添加参数
数据类型：“json”
});
});
};
$（文档）。单击（函数（e）{
putOldValueBack（）；
});
$（文档）.on（'keypress'，函数（e）{
如果（e.which==13）{
putOldValueBack（）；
}
});

谢谢。我用的是你第二个建议的变体。我以前看过datatables编辑器，没有找到我喜欢的解决方案。谢谢。我用的是你第二个建议的变体。我以前看过datatables编辑器，没有找到我喜欢的解决方案。