クリックされた行をreadonlyにする

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>クリックされた行をreadonlyにする</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の子のtdの子のinputにreadonly属性追加
  16.     target = $(this).parents("tr").children("td").children("input");
  17.     $(target).attr("readonly", "readonly");
  18.     return false;
  19.   };
  20.   
  21.   
  22. </script>
  23. </head>
  24. <body>
  25. <h1>クリックされた行をreadonlyにする</h1>
  26. <table>
  27. <tr><td><input type="text" value="hhtd1"></td><td><input type="text" value="hhtd2"></td><td><a href="#">hh</a></td></tr>
  28. <tr><td><input type="text" value="iitd1"></td><td><input type="text" value="iitd2"></td><td><a href="#">ii</a></td></tr>
  29. <tr><td><input type="text" value="jjtd1"></td><td><input type="text" value="jjtd2"></td><td><a href="#">jj</a></td></tr>
  30. </table>
  31. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  32. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  33. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  34. </div>
  35. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  36. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  37. </div>
  38. </body>
  39. </html>