ストライプテーブルとは、1行(列)おきに、異なる色を敷いた
テーブルの事です。偶数行(列)、奇数行(列)にそれぞれ
背景色を設定することで、表が見やすくなります。
コードの中にコメントを追記しました。
実行結果はこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<!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> |