数据表，添加可编辑列答案

【问题标题】：DataTables, add editable column数据表，添加可编辑列
【发布时间】：2016-06-21 16:18:22
【问题描述】：

我需要在我的表格中添加一个可编辑的列。这是我目前创建表格的方式。数据来自 Javascript 数组，并且正在发生变化（这就是为什么我在表定义中有“destroy：true”）。我希望 QTY 列的默认值为 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"
    }
});

谁能帮帮我？既要创建一个可编辑的列，又要在提交时获取该数据？

谢谢

【问题讨论】：

标签： javascript jquery html datatables

【解决方案1】：

有两种选择：

使用datatables插件https://editor.datatables.net/（不是免费的）
inputs 已经在表中

像这样：

<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>

然后数据表将有inputs。提交时您必须阅读变量name1...name#

【讨论】：

谢谢。我正在使用您的第二个建议的变体。我之前浏览过数据表编辑器，但没有找到我喜欢的解决方案。

【解决方案2】：

我创建了一个函数来编辑列。但首先，您需要为列的id 添加data-id，还将edit-tr 类添加到可编辑列。当您按下回车按钮时，列数据将保存到数据库中。

这是代码：

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();
        }
    });

【讨论】：