如何使用 jQuery 仅获取 HTML 表格中的可见元素？

Posted 2023-03-05

【中文标题】如何使用 jQuery 仅获取 HTML 表格中的可见元素？

【英文标题】：How to obtain only visible elements inside an HTML table using jQuery?

【发布时间】：2012-12-23 15:50:36

【问题描述】：

我有以下问题：我有一个表格，其中每一行都有一些可见的单元格，而有些则不可见。像这样的：

<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td id='cell_a1'>A</td>
      <td id='cell_b1' style='display:none'>B</td>
    </tr>
    <tr>
      <td id='cell_a2'>C</td>
      <td id='cell_b2' style='display:none'>D</td>
    </tr>
  </tbody>
</table>`

我只需要使用 .html() 方法检索表格的可见内容，就像上面的表格一样：

<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td id='cell_a1'>A</td>
    </tr>
    <tr>
      <td id='cell_a2'>C</td>
    </tr>
  </tbody>
</table>`

我尝试使用可见选择器，但我可能以错误的方式使用它，因为我无法让它工作。无论如何，感谢任何帮助。

【参考方案1】：

要获取所有可见元素，您可以使用 the :visible selector 和以下语法：

$('td:visible')

但这不会让您获得所有表格的 html，就好像它不包含隐藏元素一样。

为此，您可以暂时复制表格并删除不可见的单元格：

var t = $('table').clone();
t.appendTo(document.body);
t.find('td').not(':visible').remove();
var html = t.html();
t.remove();

Demonstration（打开控制台）

【参考方案2】：

我知道这已经很晚了，但是因为我喜欢学习...... ;-)

jQuery :visible Selector 有一个很好的例子。

HTML：

<table>
...
</table>

<div id="output"></div>

JS：

var t = $('table').clone();
$('td', t).filter(function()  return $(this).css('display') == 'none'; ).remove();
var html = t.html();
$('#output').text(html); // This shows the HTML code

见JSFiddle

【讨论】：

如果您将最后一行替换为console.log(t.html());，您会看到 html 也包含隐藏单元格。