如何在HTML表格仅1行时隐藏包裹该表格的div元素

你的代码存在4个会直接导致运行失败/效果不符合预期的问题，逐个修复即可：

• 语法错误：JavaScript 不支持#作为单行注释标记（这是Python/Shell等语言的注释语法），JS单行注释需要用//，你写的# find the enclosing div会直接触发语法解析错误，整段函数根本无法执行。
• 父节点查找逻辑写反：你原本的循环逻辑是「当前节点是div就继续向上找父节点」，最后会跳出所有div层定位到上层非div节点，完全拿不到包裹表格的容器。正确逻辑应该是当前节点不是div时才向上遍历，直到找到最近的外层div为止。
• DOM API 调用错误：getElementById是document对象的专属方法，不能在任意普通DOM节点上调用，你写的el.parentNode.parentNode.getElementById(idAlt)会直接抛出「方法不存在」的运行时错误。
• 自定义属性传值不符合要求：classList.add/remove接收的参数是CSS类名，你在HTML里给data-hide-style传的值是1，这不是合法的类名，不会产生任何样式效果；同时你给data-alt-id传的值是2，但现有HTML结构里根本没有id为2的备用空态节点，永远找不到要切换显示的内容。

修正后可运行代码 #

1. 先定义隐藏样式用的CSS类 #

.hide {
    display: none !important;
}

2. 修复后的JS函数 #

function emptyTableRedisplay(table, uRowsMin)
{
    if (!table || !table.rows || table.rows.length >= uRowsMin)
        return;

    let styleHide = table.getAttribute("data-hide-style");
    if (!styleHide || styleHide === "")
        return;

    let idAlt = table.getAttribute("data-alt-id");
    if (!idAlt || idAlt === "")
        return;

    // 查找包裹表格的最近一层div
    let el = table.parentNode;
    while (el && el.tagName.toLowerCase() !== "div")
        el = el.parentNode;
    if (!el)
        return;

    // 通过document调用getElementById查找空态节点
    var alt = document.getElementById(idAlt);
    if (!alt)
        return;

    el.classList.add(styleHide);
    alt.classList.remove(styleHide);
}

3. 修正后的HTML结构 #

<div id='emptyTableRedisplay'>                  
    <h3>Header</h3>
    <p>Notes</p>
    <table class='data-table monetary' data-final-rows-to-not-sort='0' data-hide-style='hide' data-alt-id='emptyTip'>
        <tbody>
            <tr>
                <th class='sortable-col' data-collation-form='0-9'>Box #</th>
                <th class='sortable-col'>Box Name</th>
                <th class='sortable-col' data-collation-form='0-9'>Reported</th>
            </tr>
            <!-- 表格实际数据行添加在此处，当前只有表头共1行，调用函数时uRowsMin传2即可触发空态切换 -->
        </tbody>
    </table>
    <!-- 新增和data-alt-id对应的空态节点，默认加hide类隐藏 -->
    <div id="emptyTip" class="hide">
        <p>暂无表格数据</p>
    </div>
</div>

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