jQueryを使ってテーブルの偶数行をターゲットにする

テーブルのjQueryを通じて偶数行にオレンジ色を付けるとします。jQueryを使ってテーブルの偶数行をターゲットにする

しかし、それは私のために働いていません。

以下

htmlコードです：

以下

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> 
     </title> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" type="text/css" href="css/custom.css" /> 
    </head> 
    <body> 
     <table class="myTable"> 
      <tr> 
       <td> 
        one 
       </td> 
       <td> 
        two 
       </td> 
      </tr> 
      <tr> 
       <td> 
        three 
       </td> 
       <td> 
        four 
       </td> 
      </tr> 
      <tr> 
       <td> 
        five 
       </td> 
       <td> 
        six 
       </td> 
      </tr> 
      <tr> 
       <td> 
        seven 
       </td> 
       <td> 
        eight 
       </td> 
      </tr> 
     </table> 
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> 
    <script type="text/javascript" src="js/custom.js" ></script> 
    </body> 
</html>

はcustom.cssのコードです：

以下

table,table td{ 
    border: 1px solid white; 
    background: green; 
    color: white; 

} 
.highlight{ 
    background: orange; 
}

はcustom.jsのコードです：

$(document).ready(function(){ 
    $('.myTable tr:even').addClass('.highlight'); 
});

私は初心者ですjQuery。

私は短く簡単な方法を探しています。

出典

2016-11-13 R K

は '' addClass（ 'ハイライト'）から '.'を削除します。 – connexo

あなたはほぼそこにいます。あなたのコード内の問題はあなたがtdを強調したいとあなたのセレクタがtrある

です。
.addClass()の構文は、addClass('highlight')であり、addClass('.highlight')ではありません。

この置換：と

$(document).ready(function(){ 
    $('.myTable tr:even').addClass('.highlight'); 
});

：0ベースのインデックス注意、特に

：documentation:oddによれば
$(document).ready(function(){ 
    $('.myTable td:odd tr').addClass('highlight'); 
}); 
偶数行を選択しますそれを意味する、反intui ：oddは、マッチしたセット内の2番目の要素、4番目の要素などを選択します。

RUNNINGのCODE：

$(document).ready(function(){ 
 
    $('.myTable tr:odd td').addClass('highlight'); 
 
});

table,table td{ 
 
    border: 1px solid white; 
 
    background: green; 
 
    color: white; 
 

 
} 
 
.highlight{ 
 
    background: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="myTable"> 
 
      <tr> 
 
       <td> 
 
        one 
 
       </td> 
 
       <td> 
 
        two 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        three 
 
       </td> 
 
       <td> 
 
        four 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        five 
 
       </td> 
 
       <td> 
 
        six 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        seven 
 
       </td> 
 
       <td> 
 
        eight 
 
       </td> 
 
      </tr> 
 
     </table>

出典

2016-11-13 07:06:14

あなたはスタイリング左側のテーブルのみ、ここで私は偶数の行をスタイリングしたい。 –

'：even'を'：odd'に置き換えると、トリックを行います:) –

なぜ-1を説明してください？ –

$(document).ready(function(){ 
    $('.myTable tr:even').addClass('highlight'); 
});

あなたは本当にこの効果を得るためのjQueryを必要といけないaddClass機能

出典

2016-11-13 07:08:48

'' .myTable tr：even''！ OPは 'td'要素をスタイルする必要があります！ –

ここで私はコードを訂正しました。同じロジックを使用することで、適格な要素のいずれかに置くことができます –

なぜコードをコピーして答えに書き直しましたか？論理を説明したいなら、英語を使うことができます。また、 '：even'セレクタは、要求通りではない奇数要素を選択します。 –

からドットを削除します。特定のユースケース/要件がある場合を除いて、奇数の擬似クラスを使用するだけで、必要性を満たすことができます。

ここにサンプルがあります。

table, 
 
table td { 
 
    border: 1px solid white; 
 
    background: green; 
 
    color: white; 
 
} 
 
table tr:nth-child(even) td { 
 
    background-color: orange; 
 
} 
 
.highlight { 
 
    background: orange; 
 
}

<table class="myTable"> 
 
    <tr> 
 
    <td> 
 
     one 
 
    </td> 
 
    <td> 
 
     two 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     three 
 
    </td> 
 
    <td> 
 
     four 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     five 
 
    </td> 
 
    <td> 
 
     six 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     seven 
 
    </td> 
 
    <td> 
 
     eight 
 
    </td> 
 
    </tr> 
 
</table>

出典

2016-11-13 07:13:31 Sreekanth

質問は、「jQueryを使用してテーブルの行を対象にする」と言います。 –

私は物事を明確にしています！ –

これは、CSSとjQueryを使って小さな例です。

// Execute a function when the DOM is fully loaded. 
 
$(document).ready(function() { 
 

 
    // Set the .alt class for the alternate rows 
 
    $('.myTable tr:nth-child(even)').addClass('alt'); 
 
});

/** Style for the body **/ 
 
body { 
 
    font: 12px Tahoma, Arial, Helvetica, Sans-Serif; 
 
} 
 
/** Main class for the alternate rows **/ 
 
.alt { 
 
    background-color:#eee; 
 
} 
 
/** Style for the table **/ 
 
.myTable { 
 
    border-collapse:collapse; 
 
    font-size: 0.917em; 
 
    max-width:500px; 
 
    min-width:450px; 
 
} 
 
.myTable td { 
 
    border:1px solid #333; 
 
    padding:4px 8px; 
 
} 
 
.myTable td:nth-child(1) { 
 
    width:200px; 
 
} 
 
.myTable td:nth-child(2) { 
 
    width:150px; 
 
} 
 
.myTable td:nth-child(3) { 
 
    width:100px; 
 
} 
 
/** Style for the cointainer **/ 
 
#body { 
 
    clear: both; 
 
    margin: 0 auto; 
 
    max-width: 534px; 
 
} 
 
html, body { 
 
    background-color:White; 
 
} 
 
hr { 
 
    margin-bottom:40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div id="body"> 
 
    
 
<h3>Table 1</h3> 
 

 
    <table class="myTable"> 
 
     <tr> 
 
      <td>As You Like It</td> 
 
      <td>Comedy</td> 
 
      <td>1600</td> 
 
     </tr> 
 
     <tr> 
 
      <td>All's Well that Ends Well</td> 
 
      <td>Comedy</td> 
 
      <td>1601</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Hamlet</td> 
 
      <td>Tragedy</td> 
 
      <td>1604</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Macbeth</td> 
 
      <td>Tragedy</td> 
 
      <td>1606</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Romeo and Juliet</td> 
 
      <td>Tragedy</td> 
 
      <td>1595</td> 
 
     </tr> 
 
    </table> 
 
    
 
<h3>Table 2</h3> 
 

 
    <table class="myTable"> 
 
     <tr> 
 
      <td>Hamlet</td> 
 
      <td>Tragedy</td> 
 
      <td>1604</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Macbeth</td> 
 
      <td>Tragedy</td> 
 
      <td>1606</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Romeo and Juliet</td> 
 
      <td>Tragedy</td> 
 
      <td>1595</td> 
 
     </tr> 
 
    </table> 
 
</div>

出典

2016-11-13 07:18:39 mrid

jQueryを使ってテーブルの偶数行をターゲットにする

答えて

関連する問題