各データの詳細表示・非表示

  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" src="knockout-2.1.0beta.js"></script>
  8. <style type="text/css">
  9. table {
  10.   border-collapse:collapse;
  11.   margin:0;
  12. }
  13. th, td {
  14.   text-align:left;
  15.   vertical-align:top;
  16.   padding:5px;
  17.   font-weight:normal;
  18.   border:1px solid #ccc;
  19. }
  20. th {
  21.   background-color:#eee;
  22. }
  23. </style>
  24. <script type="text/javascript">
  25.   function viewModel() {
  26.     var self = this;
  27.     
  28.     // 表示するデータ
  29.     self.dataObj = ko.observableArray(
  30.       new Array(
  31.         {id: 1, name: "鳥精", descrip: "鳥精肉とネギを刺した串焼き"},
  32.         {id: 2, name: "豚精", descrip: "豚精肉とネギを刺した串焼き"},
  33.         {id: 3, name: "美唄焼き鳥", descrip: "鳥のモツもまとめて刺した串焼き"},
  34.         {id: 4, name: "室蘭焼き鳥", descrip: "焼き鳥と言いつつ豚肉"},
  35.         {id: 5, name: "丸ごとシマウマ", descrip: "シマウマを丸ごと竹串に刺した凶悪な串焼き"}
  36.       )
  37.     );
  38.     
  39.     // 表示・非表示切り替え用に作成
  40.     self.detail = ko.observableArray();
  41.     for (var i=0; i<self.dataObj().length; i++) {
  42.       self.detail()[i] = ko.observable(false);
  43.     }
  44.     
  45.     // 開閉ボタンがクリックされたとき
  46.     self.sendBtn = function(obj) {
  47.       var target = self.dataObj.indexOf(obj);
  48.       self.detail()[target](!self.detail()[target]());
  49.     };
  50.   }
  51.   $(document).ready(function () {
  52.     ko.applyBindings(new viewModel());
  53.   });
  54. </script>
  55. </head>
  56. <body>
  57. <h1>各データの詳細表示・非表示</h1>
  58. <p>ボタンクリックで表示・非表示を切り替え</p>
  59. <table data-bind="foreach: dataObj">
  60. <tr>
  61.   <th data-bind="text: id"></th>
  62.   <th data-bind="text: name"></th>
  63.   <th><input type="submit" value="開閉ボタン" data-bind="click: $root.sendBtn" /></th>
  64. </tr>
  65. <tr data-bind="visible: $root.detail()[$index()]">
  66.   <td colspan="3" data-bind="text: descrip"></td>
  67. </tr>
  68. </table>
  69. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  70. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  71. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  72. </div>
  73. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  74. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  75. </div>
  76. </body>
  77. </html>