如何用jQuery排除表格最后一个td的行点击折叠效果？

架构老林

2026-7-25

解决表格操作列点击不触发行展开的问题

核心思路

问题根源是你给整个<tr>绑定了点击事件，导致点击操作列（最后一个<td>）时，事件会冒泡到父级<tr>，同时触发下拉菜单和行展开。我们需要通过阻止操作列的事件冒泡，或者在行点击逻辑里判断点击源，来跳过操作列的行展开触发。

方案一：阻止操作列的事件冒泡

直接给操作列的<td>及其子元素绑定点击事件，调用stopPropagation()阻止事件传递到父级<tr>：

// 阻止操作列及子元素的事件冒泡
$(".order_extra_info td:last-child, .order_extra_info td:last-child *").click(function(e) {
    e.stopPropagation();
});

// 保留行点击的展开/折叠逻辑（修正了原代码的API错误）
$(".order_extra_info").click(function() {
    $(this).next().toggleClass("order-extra-infor-shown");
    $(this).find('td > i').toggleClass('fa-angle-right fa-angle-down');
});

注：你原代码里的toggle(".order-extra-infor-shown")是错误用法，toggle()用于显示/隐藏元素，切换类名应该用toggleClass()，上述代码已修正该问题。

方案二：在行点击事件里判断点击源

如果不想额外绑定事件，可以在<tr>的点击回调里，判断点击元素是否属于操作列，若是则跳过展开逻辑：

$(".order_extra_info").click(function(e) {
    // 检查点击源是否是最后一个td或其子元素
    if ($(e.target).closest("td:last-child", this).length > 0) {
        return; // 跳过行展开逻辑
    }
    $(this).next().toggleClass("order-extra-infor-shown");
    $(this).find('td > i').toggleClass('fa-angle-right fa-angle-down');
});