我看到你已经用DataTables渲染出了包含三列的表格，现在需要让指定列的单元格变成可编辑状态，还得能获取编辑后的值用来提交。我来帮你修改代码实现这个需求：

首先先把你的原有代码格式化一下，方便后续修改和阅读：

$(document).ready(function () { 
    $('#myModal').toggle(); 
    var List = []; 
    $.ajax({ 
        url: '/urls/' + id, 
        type: 'POST', 
        dataType: "json", 
        data: 'data', 
        success: function (data) { 
            console.log("data length: ", data.length); 
            console.log("data : ", data); 
            for (var i = 0; i < data.length; i++) { 
                var Logs = {}; 
                Logs.Info = data[i].Info; 
                for (var j = 0; j < Logs.Info.length; j++) { 
                    var emplist = {}; 
                    emplist.Name = Logs.Info[j].Name; 
                    emplist.dates = Logs.Info[j].dates; 
                    for (var k = 0; k < emplist.dates.length; k++) { 
                        var datelist = {}; 
                        datelist.Name = emplist.Name; 
                        datelist.startDate = emplist.dates[k].startDate; 
                        datelist.endDate = emplist.dates[k].endDate; 
                        List.push(datelist); 
                    } 
                } 
            } 
            emptablee = $('#Table').DataTable({ 
                "data": List, 
                "columns": [ 
                    {"data": "Name"}, 
                    {"data": "startDate"}, 
                    {"data": "endDate"}, 
                ], 
                destroy: true, 
                "scrollY": "200px", 
                "scrollCollapse": true, 
                "paging": false 
            }); 
        } 
    }); 

    $("#close").on('click', function () { 
        $("#myModal").hide(); 
    }); 
});

接下来我们添加可编辑功能，下面以startDate和endDate列为可编辑目标（你可以根据需求灵活调整指定列）：

实现步骤说明 #

1. 给可编辑列标记专属类名，方便精准绑定事件
2. 点击单元格时将文本替换为输入框，聚焦到输入框方便编辑
3. 输入框失去焦点时，保存编辑后的值，同步更新表格显示和数据源
4. 添加提交逻辑，直接用更新后的数据源提交修改内容

修改后的完整代码：

$(document).ready(function () { 
    $('#myModal').toggle(); 
    var List = []; 
    var emptablee; // 全局保存DataTable实例，方便后续操作

    $.ajax({ 
        url: '/urls/' + id, 
        type: 'POST', 
        dataType: "json", 
        data: 'data', 
        success: function (data) { 
            console.log("data length: ", data.length); 
            console.log("data : ", data); 
            for (var i = 0; i < data.length; i++) { 
                var Logs = {}; 
                Logs.Info = data[i].Info; 
                for (var j = 0; j < Logs.Info.length; j++) { 
                    var emplist = {}; 
                    emplist.Name = Logs.Info[j].Name; 
                    emplist.dates = Logs.Info[j].dates; 
                    for (var k = 0; k < emplist.dates.length; k++) { 
                        var datelist = {}; 
                        datelist.Name = emplist.Name; 
                        datelist.startDate = emplist.dates[k].startDate; 
                        datelist.endDate = emplist.dates[k].endDate; 
                        datelist.uniqueId = `${emplist.Name}-${k}`; // 添加唯一标识，确保数据更新准确
                        List.push(datelist); 
                    } 
                } 
            } 
            emptablee = $('#Table').DataTable({ 
                "data": List, 
                "columns": [ 
                    {"data": "Name"}, 
                    {"data": "startDate", className: "editable-cell"}, // 给可编辑列加类名
                    {"data": "endDate", className: "editable-cell"}, 
                ], 
                destroy: true, 
                "scrollY": "200px", 
                "scrollCollapse": true, 
                "paging": false 
            }); 

            // 初始化可编辑单元格的事件绑定
            initEditableCells();
        } 
    }); 

    // 初始化可编辑单元格逻辑
    function initEditableCells() {
        // 先移除旧事件，避免重复绑定
        $('#Table tbody').off('click', '.editable-cell').on('click', '.editable-cell', function() {
            var cell = $(this);
            // 如果单元格里没有输入框，才创建编辑框
            if (cell.find('input').length === 0) { 
                var originalValue = cell.text().trim();
                // 创建输入框并插入单元格
                var input = $('<input type="text" value="' + originalValue + '" class="edit-input">');
                cell.empty().append(input);
                input.focus();

                // 输入框失去焦点时保存修改
                input.on('blur', function() {
                    var newValue = $(this).val().trim();
                    var row = emptablee.cell(cell).row();
                    var rowData = row.data();
                    // 根据列索引判断要更新哪个字段
                    var columnIndex = cell.index();
                    if (columnIndex === 1) { // startDate列
                        rowData.startDate = newValue;
                    } else if (columnIndex === 2) { // endDate列
                        rowData.endDate = newValue;
                    }
                    // 更新表格显示（false表示不重新排序/分页）
                    row.data(rowData).draw(false);
                    // 更新全局数据源List中的对应数据
                    var rowIndex = row.index();
                    List[rowIndex] = rowData;
                });
            }
        });
    }

    // 提交修改后的逻辑（假设你有一个id为submitEdit的提交按钮）
    $("#submitEdit").on('click', function() {
        // List数组现在已经包含所有修改后的数据
        console.log('待提交的修改数据：', List);
        // 这里写你的后端提交逻辑，比如用ajax发送数据
        /*
        $.ajax({
            url: '/your-submit-api',
            type: 'POST',
            data: JSON.stringify(List),
            contentType: 'application/json',
            success: function(res) {
                alert('修改提交成功！');
                $("#myModal").hide();
            },
            error: function(err) {
                alert('提交失败，请重试');
            }
        });
        */
    });

    $("#close").on('click', function () { 
        $("#myModal").hide(); 
    }); 
});

关键细节说明 #

• 给可编辑列添加editable-cell类名，能精准定位需要绑定事件的单元格
• 给每条数据添加uniqueId标识，确保后续更新数据时不会出现匹配错误
• 点击单元格才创建输入框，避免页面加载时就渲染大量输入框影响性能
• 编辑完成后同步更新DataTable的行数据和全局List，保证提交时数据是最新的

如果你只需要某一列可编辑（比如只有endDate），只需要调整columns配置中的className，以及判断列索引的逻辑即可。

内容的提问来源于stack exchange，提问作者user