Datatables realiza la función de edición en fila de la tabla

La función de edición en línea de la tabla se realiza operando el DOM, y el resultado final es el siguiente código

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

La createdCell puede operar el DOM especificado. Sus cinco parámetros son: nodo td, datos de celda, objeto de datos de la primera fila, índice de fila de la celda e índice de columna de la celda.

En forma de texto, el cuadro de texto aparece cuando se hace clic en la celda y se enfoca manualmente, y los datos de la celda se cambian cuando se pierde el enfoque.