如何使用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

要获取所有可见元素,可以使用以下语法的:visible选择器:

$('td:visible')

但这不会使您获得所有表的html,就好像它不包含隐藏的元素一样.

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

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

演示(打开控制台)