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

これは私が知っている遅いですが、私は学ぶのが好きなので... ;-)

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を参照してください

于 2013-01-09T15:12:43.020 に答える