各データの詳細表示・非表示
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>各データの詳細表示・非表示</title>
- <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
- <style type="text/css">
- table {
- border-collapse:collapse;
- margin:0;
- }
- th, td {
- text-align:left;
- vertical-align:top;
- padding:5px;
- font-weight:normal;
- border:1px solid #ccc;
- }
- th {
- background-color:#eee;
- }
- </style>
- <script type="text/javascript">
- function viewModel() {
- var self = this;
-
- // 表示するデータ
- self.dataObj = ko.observableArray(
- new Array(
- {id: 1, name: "鳥精", descrip: "鳥精肉とネギを刺した串焼き"},
- {id: 2, name: "豚精", descrip: "豚精肉とネギを刺した串焼き"},
- {id: 3, name: "美唄焼き鳥", descrip: "鳥のモツもまとめて刺した串焼き"},
- {id: 4, name: "室蘭焼き鳥", descrip: "焼き鳥と言いつつ豚肉"},
- {id: 5, name: "丸ごとシマウマ", descrip: "シマウマを丸ごと竹串に刺した凶悪な串焼き"}
- )
- );
-
- // 表示・非表示切り替え用に作成
- self.detail = ko.observableArray();
- for (var i=0; i<self.dataObj().length; i++) {
- self.detail()[i] = ko.observable(false);
- }
-
- // 開閉ボタンがクリックされたとき
- self.sendBtn = function(obj) {
- var target = self.dataObj.indexOf(obj);
- self.detail()[target](!self.detail()[target]());
- };
- }
- $(document).ready(function () {
- ko.applyBindings(new viewModel());
- });
- </script>
- </head>
- <body>
- <h1>各データの詳細表示・非表示</h1>
- <p>ボタンクリックで表示・非表示を切り替え</p>
- <table data-bind="foreach: dataObj">
- <tr>
- <th data-bind="text: id"></th>
- <th data-bind="text: name"></th>
- <th><input type="submit" value="開閉ボタン" data-bind="click: $root.sendBtn" /></th>
- </tr>
- <tr data-bind="visible: $root.detail()[$index()]">
- <td colspan="3" data-bind="text: descrip"></td>
- </tr>
- </table>
- <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
- <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
- <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
- </div>
- <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
- Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
- </div>
- </body>
- </html>