DataTable点击TD弹窗重复及编辑控件显示隐藏问题求助

问题修正与功能实现 #

1. 解决弹窗重复触发：原代码每次点击单元格都会重复绑定所有.clickable的点击事件，导致事件叠加多次触发弹窗。改用事件委托一次性绑定，彻底避免重复绑定问题。
2. 生成对应编辑控件：
   • 第1、2列（索引0、1）点击后替换为带单元格原值的select下拉框（示例选项可根据实际业务调整）
   • 第3、4列（索引2、3）点击后替换为带单元格原值的input文本框
3. 点击外部隐藏编辑控件：监听页面全局点击事件，判断点击区域不在DataTable内时，将所有编辑控件还原为原始文本内容。

完整代码

HTML部分

<form id="form1" runat="server">
    <div id="GridView">
        <table id="example" class="display" style="width: 100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="clickable">Tiger Nixon</td>
                    <td class="clickable">System Architect</td>
                    <td class="clickable">Edinburgh</td>
                    <td class="clickable">61</td>
                    <td class="clickable">2011-04-25</td>
                    <td class="clickable">$320,800</td>
                </tr>
                <tr>
                    <td class="clickable">Garrett Winters</td>
                    <td class="clickable">Accountant</td>
                    <td class="clickable">Tokyo</td>
                    <td class="clickable">63</td>
                    <td class="clickable">2011-07-25</td>
                    <td class="clickable">$170,750</td>
                </tr>
                <tr>
                    <td class="clickable">Ashton Cox</td>
                    <td class="clickable">Junior Technical Author</td>
                    <td class="clickable">San Francisco</td>
                    <td class="clickable">66</td>
                    <td class="clickable">2009-01-12</td>
                    <td class="clickable">$86,000</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </table>
    </div>
</form>

JavaScript部分

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>

<script>
$(document).ready(function () {
    const table = $('#example').DataTable();

    // 事件委托绑定单元格点击，仅绑定一次
    $('#example').on('click', '.clickable', function(e) {
        e.stopPropagation(); // 阻止事件冒泡，避免触发全局点击事件
        const $cell = $(this);
        const cellValue = $cell.text().trim();
        const colIndex = $cell.index();

        // 已处于编辑状态则跳过
        if ($cell.find('select, input').length > 0) return;

        let editElement;
        // 前两列生成select下拉框
        if (colIndex === 0 || colIndex === 1) {
            editElement = $(`<select class="edit-control">
                <option value="${cellValue}" selected>${cellValue}</option>
                <option value="Option 1">Option 1</option>
                <option value="Option 2">Option 2</option>
            </select>`);
        } 
        // 第3、4列生成文本输入框
        else if (colIndex === 2 || colIndex === 3) {
            editElement = $(`<input type="text" class="edit-control" value="${cellValue}">`);
        } 
        // 其他列保留弹窗逻辑
        else {
            alert(cellValue);
            return;
        }

        // 保存原始值，用于后续还原
        $cell.data('original-value', cellValue);
        // 替换单元格内容为编辑控件
        $cell.html(editElement);
    });

    // 点击表格外部，还原所有编辑控件
    $(document).on('click', function(e) {
        if (!$(e.target).closest('#example').length) {
            $('.edit-control').each(function() {
                const $control = $(this);
                const $cell = $control.parent();
                const originalValue = $cell.data('original-value');
                $cell.html(originalValue);
                $cell.removeData('original-value');
            });
        }
    });
});
</script>

关键说明 #

• 事件委托：通过$('#example').on('click', '.clickable', ...)绑定事件，只会执行一次绑定操作，从根源解决重复弹窗问题。
• 编辑控件管理：用data('original-value')存储单元格原始文本，确保还原时内容准确；同时判断单元格是否已处于编辑状态，避免重复生成控件。
• 全局点击监听：通过closest('#example')判断点击区域是否在表格内，不在则批量还原所有编辑控件，提升交互体验。
• 事件冒泡阻止：单元格点击时调用e.stopPropagation()，防止刚生成的编辑控件被全局点击事件立即还原。

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