3

テーブルの行をスタイリングして、テーブルをシマウマとしてスタイルする必要があります。 css を使用しました:nth-of-type(even)。しかし、たとえば、テーブルの様式化された要素の一部を非表示にする必要がある場合、失われます。テーブルのシマウマとして動的なスタイルを作成する最も簡単な方法は何ですか?

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <style type="text/css">
    table tr:nth-of-type(even){background: yellow;}
  </style>
  <script type="text/javascript">
    function hideRow(){
      $(".hidden").hide();
    }
  </script>
</head>
<body>
<center>
 <table cellspacing="0" border="1">
     <tbody>
    <tr class="table-row">
      <td>row1</td>
    </tr>
    <tr class="table-row">
      <td>row2</td>
    </tr>
    <tr class="table-row hidden">
      <td>row3</td>
    </tr>
    <tr class="table-row">
      <td>row4</td>
    </tr>
    <tr class="table-row">
      <td>row5</td>
    </tr>
    </tbody>
 </table>
 <input type="submit" onclick=" hideRow()" value="submit"/> 
 </center>
</body>
</html>

テーブルのスタイルを動的に変更するにはどうすればよいですか?

現在の結果:
ここに画像の説明を入力 ここに画像の説明を入力
期待される結果:
ここに画像の説明を入力 ここに画像の説明を入力

4

3 に答える 3

1

要素を非表示にしても、まだそこにある (単に非表示になっている) ため、この問題が発生します。CSS:nth-of-type(even)セレクターに対して単純なスクリプトを作成することをお勧めします。まず、2 つのクラス:

.table_odd { color: yellow; } 
.table_even {color: white; }

今すぐ関数を作成します：

function refrestTableColoring( $tableSelector ) {
    $tableSelector.find('tr:odd:not(.hidden)').removeClass('table_even').addClass('table_odd');
    $tableSelector.find('tr:even:not(.hidden)').removeClass('table_odd').addClass('table_even'); 
}

そして、使い方は簡単です。ドキュメントの準備ができて、要素を非表示にしているときに呼び出します。

refrestTableColoring( $('table') );
于 2013-01-22T13:29:55.520 に答える
0 
 table tr[@display=block]:nth-of-type(even){background: yellow;}

これは機能しますか？

免責事項:未テスト

于 2013-01-22T13:28:51.327 に答える
0

これにはhide()の代わりにremove()を使用できます。次のように書きます。

$('input[type="submit"]').click(function(){
    $(".hidden").remove();
});

これをチェックしてくださいhttp://jsfiddle.net/fhbgM/

于 2013-01-22T13:34:50.757 に答える