Datatables实现表格行内编辑功能

表格行内编辑功能通过操作DOM来实现，最终实现效果如下代代码

html

<table class="table table-striped table-bordered table-hover tb_listTable" id="apply_listTable">
        <thead>
        <tr>
{#            <th>编号</th>#}
            <th>系统名称</th>
            <th>申请人</th>
            <th>申请人联系方式</th>
            <th>申请人单位</th>
            <th>申请时间</th>
            <th>推荐人</th>
            <th>授权状态</th>
            <th>授权截止日期</th>
{#            <th>最后一次登录时间</th>#}
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>

js

columnDefs: [
                {
                    "targets": 7,
                    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).click(function () {
                            $(this).html('<input type="text" size="16" style="width: 100%"/>');
                            var aInput = $(this).find(":input");
                            aInput.focus().val(cellData);
                            });
                            $(cell).on("blur", ":input", function () {
                            var text = $(this).val();
                            $(cell).html(text);
                                $(cell).attr('dead_time',text)
                            editTableObj.cell(cell).data(text);
                                // $("#permission_time").val(text)
                            })
                    }
                }
]

createdCell可以操作指定的DOM，它的五个参数分别是：td节点，单元格里的数据，正行的数据对象，单元格的行索引，单元格的列索引。

text形式的是点击单元格的时候出现文本框并且手动让其得焦，失去焦点的时候改变单元格的数据，