クリックされた行を色変更

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>クリックされた行を色変更</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript">
  8.   $(document).ready(function () {
  9.     // aタグにクリックイベント時にviewLine()を実行と追加(バインディング)
  10.     $('a').bind('click', viewLine);
  11.   });
  12.   
  13.   var viewLine = function(e)
  14.   {
  15.     // クリックされたaタグの親のtr
  16.     pTrAry = $(this).parents("tr");
  17.     
  18.     // pTrAry(aタグの親のtr)の子のtd
  19.     cTdAry = $(pTrAry).children("td");
  20.     
  21.     // cTdAry(pTrAry(aタグの親のtr)の子のtd)にCSS追加
  22.     $(cTdAry).css("color", "red");
  23.     return false;
  24.   };
  25.   
  26.   
  27. </script>
  28. </head>
  29. <body>
  30. <h1>クリックされた行を色変更</h1>
  31. <table>
  32. <tr><td>eetd1</td><td>eetd2</td><td><a href="#">ee</a></td></tr>
  33. <tr><td>fftd1</td><td>fftd2</td><td><a href="#">ff</a></td></tr>
  34. <tr><td>ggtd1</td><td>ggtd2</td><td><a href="#">gg</a></td></tr>
  35. </table>
  36. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  37. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  38. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  39. </div>
  40. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  41. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  42. </div>
  43. </body>
  44. </html>