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

Question

我遇到以下问题:我有一个表格，其中每行都有一些可见的单元格，有些不可见。像这样的事情:

<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>`

我尝试使用可见选择器，但我可能使用了错误的方式，因为我无法使其工作。不管怎样，任何帮助都是值得赞赏的。

Answer 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 (打开控制台)