如何实现表格为空时隐藏外层div，非空时自动显示？

原代码问题分析 #

• 错误使用$('#main_container').val()：div元素没有val()方法，这个方法仅适用于表单输入类元素（如input、select），因此该判断逻辑完全不成立。
• 判断逻辑偏差：要判断表格是否为空，应该检查表格<tbody>内的实际数据行，而非外层div的内容。当前示例里的tbody包含占位行，需要区分占位行与真实数据行。

解决方案 #

方法一：jQuery实现 #

将判断逻辑封装成可复用函数，方便页面加载及表格内容动态变化时调用：

// 封装显示/隐藏控制函数
function toggleContainerVisibility() {
    // 逻辑：检查tbody中是否存在非占位的有效数据行
    // 这里假设占位行包含.lz-place类，可根据实际情况调整判断条件
    const hasValidContent = $('#my_table .wishlist-page-items tr:not(:has(.lz-place))').length > 0 
                           // 备选逻辑：判断行内td是否有非空白文本
                           // || $('#my_table .wishlist-page-items tr').filter(function() {
                           //     return $(this).find('td').text().trim() !== '';
                           // }).length > 0;

    if (hasValidContent) {
        $('#main_container').show();
        console.log("显示容器");
    } else {
        $('#main_container').hide();
        console.log("隐藏容器");
    }
}

// 页面加载完成后执行初始判断
$(document).ready(function() {
    toggleContainerVisibility();

    // 若表格内容动态变化（如AJAX加载、删除行），在操作后调用该函数
    // 示例：删除按钮点击后更新状态
    // $('.delete-btn').on('click', function() {
    //     // 执行删除操作
    //     toggleContainerVisibility();
    // });
});

方法二：原生JavaScript实现 #

无需依赖jQuery，用原生JS实现相同逻辑：

function toggleContainerVisibility() {
    const container = document.getElementById('main_container');
    const tbody = document.querySelector('#my_table .wishlist-page-items');
    const rows = tbody.querySelectorAll('tr');
    
    let hasValidContent = false;
    // 遍历所有行，检查是否有非空白内容的单元格
    rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        for (const cell of cells) {
            if (cell.textContent.trim() !== '') {
                hasValidContent = true;
                break;
            }
        }
        if (hasValidContent) return;
    });

    container.style.display = hasValidContent ? 'block' : 'none';
    console.log(hasValidContent ? "显示容器" : "隐藏容器");
}

// 页面加载完成后执行初始判断
document.addEventListener('DOMContentLoaded', function() {
    toggleContainerVisibility();

    // 动态内容变化后调用该函数，确保状态实时更新
});

补充说明 #

• 若你的“空表格”定义是tbody中无任何<tr>（包括占位行），可简化判断：
  • jQuery：$('#my_table .wishlist-page-items tr').length === 0
  • 原生JS：tbody.children.length === 0
• 动态场景下必须在内容更新后调用控制函数，才能实时同步容器的显示状态。

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