如何使用javascript查找带有类名的空表？-解网

问：

我有一个动态生成html表格的页面。我无法控制表的生成方式，但我可以将 JavaScript 代码放入其中。

我想做的是，有一些表是空的，即它们只有行而没有行。我想使用 JavaScript 隐藏/删除这些表。<th><td>

所有表都有一个类“card-table”。

是否可以找到所有具有“card-table”类的表，如果少于 1 行，则将其删除/隐藏？

任何帮助都是值得赞赏的。

提前致谢。

我只是尝试使用jQuery或JavaScript，但我不确定如何使用相同的类遍历表并删除/隐藏它们。

javascript html jquery dom

评论

0赞 evolutionxbox 10/10/2023

是的。这是可能的。

0赞 CBroe 10/10/2023

$('.card-table').each(...)循环访问表。在回调函数中，用于查找当前表元素中包含的内容，并检查返回的内容。如果为 0，则隐藏当前表。findtrlength

0赞 connexo 10/10/2023

它们只有行，没有行哼？

0赞 freedomn-m 10/11/2023

"是的。这是可能的。- 专业提示：始终提出您想要答案的问题。

0赞 freedomn-m 10/11/2023

@connexo标记未转义的经典案例。不确定“只有第 1 行，没有 td 行”在技术上是否正确，但它给出了一个只有“标题”行的想法。OP 可能没有区分和，也没有意识到可以与中的相同混合。包含相关的 HTML 会有所帮助。theadtbodythtdtrtbody

答：

1赞 m.piras 10/10/2023 #1

你可以在jQuery中做这样的事情

$(document).ready(function() {
    $('table.card-table').each(function() {
        // If the table has less than 2 rows, hide it
        if ($(this).find('tr').length < 2) {
            $(this).hide();
        }
    });
});

评论

0赞 freedomn-m 10/11/2023

@Kikloo请记得将答案标记为已接受。

0赞 mplungjan 10/10/2023 #2

不显示零行的表

$(function() {
  $('table.card-table').each(function() {
    const $rows = $(this).find('tr');
    $(this).toggle($rows.length > 0); // show if more than 0
  });
});

香草

window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('table.card-table').forEach(table => {
    const rows = table.querySelectorAll('tr');
    table.hidden = rows.length === 0; // hide if 0
  });
});

0赞 connexo 10/10/2023 #3

表具有用于访问和计数和以及的内置 API。这还考虑到您的空表可能有一个非空标签来标记您的空列。rowscolumnstBodiesthead

使用它：

for (const table of document.querySelectorAll('table.card-table')) {
  table.hidden = [...table.tBodies].every(body => body.rows.length === 0);
}

当您确定所有有问题的表都在文档中正确解析时，请确保正确运行此代码，例如，通过在侦听器中运行它。DOMContentLoaded

话虽如此，最好一开始就不要呈现这些表。因此，我强烈建议在生成表的代码部分修复此问题。

上一个：为什么 jQuery 或 DOM 方法（如 getElementById）找不到元素？

下一个：脚本标记上的事件侦听器