表格仅余一行/列时隐藏删除按钮的JS实现问题

你的问题主要出在两个地方：语法错误和逻辑时机不对，我来一步步帮你修正：

问题分析 #

1. JavaScript语法错误：你用了if rowCount > 1 and columnCount > 1，这不符合JS语法——条件判断需要加括号()，并且逻辑与要用&&而不是and。
2. 逻辑时机错误：你一开始就获取行列数并判断，然后才绑定悬停事件。但用户删除行列后，页面的行列数会变化，这个初始判断不会自动更新；而且如果页面加载时就只剩一行/列，事件根本不会绑定，后续即使添加行列也不会显示按钮。

正确的实现方案 #

我们需要在每次鼠标悬停的时候，动态检查当前的行列数，再决定是否显示删除按钮，而不是只在页面加载时判断一次。

修正后的代码如下：

$(document).on('mouseover','.my-table tr td',function(){
    // 每次悬停时获取最新的行列数
    var rowCount = $('.my-table tr').length;
    var columnCount = $(".my-table > tr:first > td").length;
    
    // 如果只剩一行 或 只剩一列，隐藏所有删除按钮并终止后续逻辑
    if (rowCount <= 1 || columnCount <= 1) {
        $('.del-column-td, .del-row-td').addClass('hide');
        return;
    }
    
    // 以下是你原来的显示逻辑，做了小优化
    var columnDelIndex = $("td", $(this).closest("table")).index(this);
    var col_num = $('.my-table tr:first > td').length;
    
    // 先隐藏所有按钮
    $('.del-column-td, .del-row-td').addClass('hide');
    // 显示当前单元格对应的行列删除按钮
    $('.del-column-td').eq(parseInt(columnDelIndex % col_num)).removeClass('hide');
    $('.del-row-td').eq(parseInt(columnDelIndex / col_num)).removeClass('hide');
});

优化点说明 #

• 把行列数的获取移到了悬停事件内部，确保每次都用最新的表格状态。
• 先判断临界条件，如果满足（<=1行/列）就直接隐藏按钮并结束函数，避免执行多余逻辑。
• 用.eq()代替直接通过数组下标取元素，这是jQuery更推荐的写法，兼容性更好。
• 合并了按钮选择器，简化代码：$('.del-column-td, .del-row-td')一次选中两个按钮组。

另外，建议你在鼠标移出表格单元格时，也隐藏所有按钮，保持交互一致性：

$(document).on('mouseout','.my-table tr td',function(){
    $('.del-column-td, .del-row-td').addClass('hide');
});

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