点击上方单行表格单元格删除下方多列表格列的实现问题

你这个思路完全没问题！不过你的代码在jQuery版本兼容性和细节处理上还有可以优化的地方，我来帮你拆解下：

首先，你用delegate()绑定事件的方式是jQuery 1.7之前的写法，现在官方更推荐用on()来统一事件绑定API，兼容性和灵活性都更好。另外，还有几个细节需要注意，比如要同时处理表头的<th>元素，避免删除列后表头残留，以及用更可靠的方式获取单元格索引。

优化后的完整代码 #

// 绑定到两个表格的共同父容器，性能比绑定到document更好
$('.table-wrapper').on('click', '.del-column td', function() {
    // 获取当前点击单元格的索引（jQuery的index()更通用）
    const colIndex = $(this).index();
    // 遍历目标表格的每一行，删除对应索引的单元格（包括th和td）
    $('.my-table tr').each(function() {
        $(this).find('td, th').eq(colIndex).remove();
    });
});

配套的HTML结构示例 #

<!-- 用一个容器包裹两个表格，方便事件委托 -->
<div class="table-wrapper">
    <!-- 上方的单行删除触发表格 -->
    <table class="del-column" style="border: 1px solid #ccc; margin-bottom: 10px;">
        <tr>
            <td style="padding: 8px; cursor: pointer;">删除列1</td>
            <td style="padding: 8px; cursor: pointer;">删除列2</td>
            <td style="padding: 8px; cursor: pointer;">删除列3</td>
        </tr>
    </table>

    <!-- 下方的目标数据表格 -->
    <table class="my-table" border="1">
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
        <tr>
            <td>数据1-1</td>
            <td>数据1-2</td>
            <td>数据1-3</td>
        </tr>
        <tr>
            <td>数据2-1</td>
            <td>数据2-2</td>
            <td>数据2-3</td>
        </tr>
    </table>
</div>

几个关键优化点 #

• 替换delegate()为on()：on()是jQuery 1.7+的标准事件绑定方法，不仅支持事件委托，还能处理直接绑定的场景，比delegate()更统一。
• 同时处理<th>和<td>：你的原始代码只删除了<td>元素，如果目标表格有表头（<th>），删除后表头会残留，所以要同时选中td和th一起删除。
• 用$(this).index()获取索引：原生的this.cellIndex在遇到合并单元格（colspan）时会出错，而jQuery的index()会自动计算当前元素在同级元素中的位置，更可靠。
• 事件委托到父容器：把事件绑定到两个表格的共同父容器（比如.table-wrapper），比绑定到document的性能更好，而且如果表格是动态生成的，事件依然能生效。

如果你的项目用的是非常旧的jQuery版本（1.7之前），那delegate()也能运行，但还是建议升级jQuery版本或者换成on()写法，避免后续兼容性问题。另外测试的时候要确保两个表格的列数完全对应，不然点击后可能会删错列哦！

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