Datatables realizes the in-row editing function of the table

The in-line editing function of the table is realized by operating the DOM, and the final result is the following code

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)
                            })
                    }
                }
]

The createdCell can operate the specified DOM. Its five parameters are: td node, cell data, data object of the front row, row index of the cell, and column index of the cell.

In the form of text, the text box appears when the cell is clicked and manually make it focus, and the data of the cell is changed when the focus is lost.