ストライブテーブルを作成する。

ストライプテーブルとは、1行(列)おきに、異なる色を敷いた
テーブルの事です。偶数行(列)、奇数行(列)にそれぞれ
背景色を設定することで、表が見やすくなります。

コードの中にコメントを追記しました。
実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>
    
    <style>
	*{margin:0;padding:0;}

    table{margin:100px auto;}
    
    .even{background:#f2f2f2;}
    
    th{background:#222222;
        color:white;}

    .odd{
        background:#56ff56;}
        
    th,td{padding:5px;
    font-size:small;}

    /* マウスのカーソルが乗っていない
    テーブルの横一列を選択したときの色 */
    tr:not(:first-child):hover{
        background:#b2c8ff;}
    
    /* add/removeClass用に設けたclass 
    マウスを乗せた場所が薄い紫に変わる  */
    .hover{background:#ffd8ff;}

    </style>
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

    <table>
    <tr>
        <th>no</th>
        <th>Name</th>
        <th>Birthday</th>
        <th>Phone</th>
        <th>Mail</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Sato</td>
        <td>1975-03-08</td>
        <td>090-1234-5678</td>
        <td>example01@abc.net</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Suzuki</td>
        <td>1977-03-08</td>
        <td>090-5678-1234</td>
        <td>example02@abc.net</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Tanaka</td>
        <td>1972-03-08</td>
        <td>090-8765-4321</td>
        <td>example03@abc.net</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Kato</td>
        <td>1980-03-08</td>
        <td>080-3456-9876</td>
        <td>example04@abc.net</td>
    </tr>
    </table>

<script>
$(function(){

    $("th:nth-child(odd)").addClass("odd");
    $("tr:nth-child(even)").addClass("even");
    
    $("tr:not(:first-child)").mouseover(function(){
        $(this).addClass("hover");
    }).mouseout(function(){
        $(this).removeClass("hover");
    });
   
   $("td").mouseover(function(){
    /*
    　●$("td").index(this) は要素の順番(インデックス番号)を調べる命令です。
      　今回は、現在マウスが重なっている場所のtd要素が $("td")の中で何番目の
    　　なのかを取得します。

    　●%(パーセント)は、割り算の余りを求める演算子(記号)で、A % B とかけば
　     AをBで割った余りが出ます。

    　●("th").lengthには、セレクターで指定した要素の存在する数が入っています。
     　今回はthを指定しているので、テーブルの列の数　＝　「５」が入っています。
      
      ●$("td").index(this)%$("th").length　は
      　マウスが乗っているtd要素の数を thの要素の数で割った
       余りを表しています。
    　●+1 をしているのは:nth-child()の番号は1から始まるからです。
    */
    $("td:nth-child(" + ($("td").index(this)%$("th").length+1)+")").addClass("hover");
   }).mouseout(function(){
    $("td:nth-child(" + ($("td").index(this)%$("th").length+1)+")").removeClass("hover");
   });

});
</script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

table{margin:100px auto;}

.even{background:#f2f2f2;}

th{background:#222222;

color:white;}

.odd{

background:#56ff56;}

th,td{padding:5px;

font-size:small;}

/* マウスのカーソルが乗っていない

テーブルの横一列を選択したときの色 */

tr:not(:first-child):hover{

background:#b2c8ff;}

/* add/removeClass用に設けたclass

マウスを乗せた場所が薄い紫に変わる */

.hover{background:#ffd8ff;}

</style>

</head>

<body>

<table>

<tr>

<th>Birthday</th>

<th>Phone</th>

</tr>

<tr>

<td>example01@abc.net</td>

</tr>

<tr>

<td>Suzuki</td>

<td>example02@abc.net</td>

</tr>

<tr>

<td>Tanaka</td>

<td>example03@abc.net</td>

</tr>

<tr>

<td>example04@abc.net</td>

</tr>

</table>

$(function(){

$("th:nth-child(odd)").addClass("odd");

$("tr:nth-child(even)").addClass("even");

$("tr:not(:first-child)").mouseover(function(){

$(this).addClass("hover");

}).mouseout(function(){

$(this).removeClass("hover");

});

$("td").mouseover(function(){

　●$("td").index(this) は要素の順番(インデックス番号)を調べる命令です。

　今回は、現在マウスが重なっている場所のtd要素が $("td")の中で何番目の

　　なのかを取得します。

　●%(パーセント)は、割り算の余りを求める演算子(記号)で、A % B とかけば

　 AをBで割った余りが出ます。

　●("th").lengthには、セレクターで指定した要素の存在する数が入っています。

　今回はthを指定しているので、テーブルの列の数　＝　「５」が入っています。

●$("td").index(this)%$("th").length　は

　マウスが乗っているtd要素の数を thの要素の数で割った

余りを表しています。

　●+1 をしているのは:nth-child()の番号は1から始まるからです。

$("td:nth-child(" + ($("td").index(this)%$("th").length+1)+")").addClass("hover");

}).mouseout(function(){

$("td:nth-child(" + ($("td").index(this)%$("th").length+1)+")").removeClass("hover");

});

</script>

</body>

</html>