如何用JavaScript移除模态视图表格中含空单元格的行？

核心错误原因 #

你的代码判断cell.innerHTML === ''是错误的——每个<td>里都包含一个<input>元素，哪怕input的值为空，td的innerHTML也会是类似<input class="form-control-plaintext" readonly ...>的内容，永远不会是空字符串，所以过滤条件永远不生效。

修正方案 #

方案1：原生JS实现 #

修改脚本，遍历表格行，检查每行内的input是否存在空值，若有则删除该行：

$(function () {
    // 监听模态框显示事件，确保操作已渲染完成的DOM
    $('#@("DetailDepartment-"+Model.DepId)').on('shown.bs.modal', function () {
        // 获取表格所有数据行
        const rows = document.querySelectorAll('table.table-striped tbody tr');
        rows.forEach(row => {
            // 检查当前行内是否有值为空的input
            const hasEmptyInput = Array.from(row.querySelectorAll('input')).some(input => input.value.trim() === '');
            if (hasEmptyInput) {
                row.remove();
            }
        });
    });
});

方案2：jQuery简化实现 #

如果习惯用jQuery，代码可以更简洁：

$(function () {
    $('#@("DetailDepartment-"+Model.DepId)').on('shown.bs.modal', function () {
        $('table.table-striped tbody tr').each(function() {
            const $row = $(this);
            // 筛选出行内值为空的input
            const hasEmpty = $row.find('input').filter(function() {
                return $(this).val().trim() === '';
            }).length > 0;
            if (hasEmpty) {
                $row.remove();
            }
        });
    });
});

额外注意点 #

• 监听shown.bs.modal事件是因为你的模态框初始为隐藏状态（带有fade类），如果分部视图是动态加载的，脚本可能在DOM未完全渲染时执行，监听显示事件能确保操作的是已就绪的元素。
• 使用trim()是为了排除仅包含空格的"伪空值"，如果不需要过滤空格，直接去掉.trim()即可。

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