5

表示される奇数 (または偶数) の子に特定のスタイルを適用する方法を探しています (したがって、非表示の子は除外されます)。オプションで、非表示の子が表示されるときにそのスタイルが適用されれば完璧です!

ここにライブサンドボックスがあります: http://jsfiddle.net/zrges/1/

そして、ここに私が視覚的に欲しいものがあります：http://jsfiddle.net/qJwFj/（もちろん、これは単なる表示例です。そのために書いたくだらないコードは気にしないでください）

私は、それを処理するための適切な疑似クラス、css セレクターを管理できません。

私は完全なcss/htmlソリューションを望んでいます（js/phpソリューションではなく、簡単です）

どうもありがとうございました！

4

3 に答える 3

1

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


HTML:

<button id="toggle">Toggle it!</button>
 <table>
  <tr class="sub"><td>Row 1</td></tr>
  <tr class="tag"><td>Row 2</td></tr>
  <tr class="sub"><td>Row 3</td></tr>
  <tr class="tag"><td>Row 4</td></tr>
  <tr class="sub"><td>Row 5</td></tr>
  <tr class="tag"><td>Row 6</td></tr>
  <tr class="sub"><td>Row 7</td></tr>
 </table>​


CSS:

     tr:nth-of-type(even),.bg {
        background-color: gray;
     }

    .hidden {
        display:none;   
    }​


JS:

$(document).ready(function () {
$('#toggle').click(function () {
    $('.tag').toggleClass("hidden");
    $(".sub:nth-child(4n+1)").toggleClass("bg");
});
});​
于 2012-04-13T10:28:32.977 に答える
0

CSS:

tr.sub { display: none; }
​.color { background: blue; }​

js:

$(document).ready(function () {
    $('table tr:visible:even').addClass('color');

    $('#toggle').click(function () {
        $('table tr').removeClass('color');
        $('table tr.sub').toggle();
        $('table tr:visible:even').addClass('color');
    });
});​
于 2012-04-13T10:05:25.627 に答える
-1

テーブルの場合、使用できます

tr:nth-child(even) { // your style }
tr:nth-child(odd) { // your style}

また

tr:nth-child(2n+0) { // your style }
tr:nth-child(2n+1) { // your style}
于 2012-04-13T09:57:58.847 に答える