3

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

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

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

4

2 回答 2

8

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

$('td:visible')

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

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

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

演示（打开控制台）

于 2013-01-09T14:54:08.700 回答
1

This is late I know, but since I like learning ... ;-)

At jQuery :visible Selector, there's a nice example.

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

See JSFiddle

于 2013-01-09T15:12:43.020 回答