-1

次のようなテーブルがあります。

<table>
   <tr>
      <th>h1</th>
      <th>h2</th>
      <th>h3</th>
  </tr>

  <tr>
      some content here
  </tr>

  <tr>
      <td>1</td> <td>2</td> <td>3</td>
  </tr>
  <tr>
      inside this row, I have a table which contains 2 rows
  </tr>


   <tr>
      <td>1</td> <td>2</td> <td>3</td>
  </tr>
  <tr>
      inside this row, I have a table which contains 2 rows
  </tr>

   <tr>
      <td>1</td> <td>2</td> <td>3</td>
  </tr>
  <tr>
      inside this row, I have a table which contains 2 rows
  </tr>
  //it repeats like this


</table>

jquery を使用して 3 行目から 3 行ごとに代替色を適用したいと考えています。つまり、コードの次のセクションに代替色を適用したいと考えています。どうすればいいですか？ありがとう

      <tr>
         <td>1</td> <td>2</td> <td>3</td>
      </tr>
      <tr>
          inside this row, I have a table which contains 2 rows
      </tr>

基本的に、ヘッダー行とヘッダー行の後の最初の行を選択したくありません。その後、毎回3行を選択し、別の色を付けたいと思います。3行は上記の行になります。

4

4 に答える 4

2

n番目の子セレクターを使用する

$("table tr:nth-child(3n)")
于 2013-02-11T21:30:36.927 に答える
1 
$('table tr:nth-child(3n) td').css('background-color', 'red');
$('table tr:nth-child(3n+1) td').css('background-color', 'blue');
$('table tr:nth-child(3n+2) td').css('background-color', 'green');
于 2013-02-11T21:34:53.793 に答える
0

あなたは純粋なcss3を使うことができます

table tr:nth-child(3n+3) { background:red; }

またはjquery経由でも、kmd97の回答のように

$("table tr:nth-child(3n+3)").css("background","red");

3nは3要素ごとを意味し、+3は3番目の要素から始まることを意味します。

このオンラインCSSテスターを試すことができます

于 2013-02-11T21:53:00.637 に答える
0 
var totalOfRows = $('table').find('tr').length;

var rows = $('table').find('tr');

for(var i=0; i<totalOfRows;i++){
 $(rows[i]).attr('bgcolor','red'); //logical here
}

for example, yo can write .css('background-color', 'blue'); .css('background-color', 'pink'); etc
于 2013-02-11T21:34:50.253 に答える