文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 <html> <style type="text/css"> table { margin: 0.5em 0; border: 1px solid black; border-collapse: collapse; font-size: small; font-family: sans-serif; } td, th { padding: 0.2em 0.3em; border: 1px solid silver; } th { text-align: left; padding-right: 20px; cursor: default; } thead th.sort-asc, thead th.sort-desc { background: #aaf url('sort-asc.png') no-repeat right center; } thead th.sort-desc { background-image: url('sort-desc.png'); } tr.alternate * { background-color: #ddd; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script> <script type="text/javascript"> Element.addMethods({ collectTextNodes: function(element) { return $A($(element).childNodes).collect( function(node) { return (node.nodeType==3 ? node.nodeValue : (node.hasChildNodes() ? Element.collectTextNodes(node) : '')); }).flatten().join(''); } }); var TableSorter = Class.create({ initialize: function(element) { this.element = $(element); this.sortIndex = -1; this.sortOrder = 'asc'; this.initDOMReferences(); this.initEventHandlers(); }, // initialize initDOMReferences: function() { var head = this.element.down('thead'); var body = this.element.down('tbody'); if (!head || !body) throw 'テーブルには、ヘッダとソート可能なボディが必要です。'; this.headers = head.down('tr').childElements(); this.headers.each(function(e, i) { e._colIndex = i; }); this.body = body; }, // initDOMReferences initEventHandlers: function() { this.handler = this.handleHeaderClick.bind(this); this.element.observe('click', this.handler); }, // initEventHandlers handleHeaderClick: function(e) { var element = e.element(); if (!('_colIndex' in element)) { element = element.ancestors().find(function(elt) { return '_colIndex' in elt; }); if (!((element) && '_colIndex' in element)) return; } this.sort(element._colIndex); }, // handleHeaderClick adjustSortMarkers: function(index) { if (this.sortIndex != -1) this.headers[this.sortIndex].removeClassName('sort-' + this.sortOrder); if (this.sortIndex != index) { this.sortOrder = 'asc'; this.sortIndex = index; } else this.sortOrder = ('asc' == this.sortOrder ? 'desc' : 'asc'); this.headers[index].addClassName('sort-' + this.sortOrder); }, // adjustSortMarkers sort: function(index) { this.adjustSortMarkers(index); var rows = this.body.childElements(); rows = rows.sortBy(function(row) { return row.childElements()[this.sortIndex].collectTextNodes(); }.bind(this)); if ('desc' == this.sortOrder) rows.reverse(); rows.reverse().each(function(row, index) { if (index > 0) this.body.insertBefore(row, rows[index - 1]); }.bind(this)); rows.reverse().each(function(row, index) { row[(1 == index % 2 ? 'add' : 'remove') + 'ClassName']('alternate'); }); } // sort }); // TableSorter document.observe('dom:loaded', function() { $$('table').each(function(table) { new TableSorter(table); }); }); </script> <table id="netfw"> <thead> <tr> <th>.NET バージョン</th> <th>バージョン</th> <th>リリース日</th> </tr> </thead> <tbody> <tr> <td>Pre-beta</td> <td>?.?.?.?</td> <td>2000年7月11日</td> </tr> <tr class="alternate"> <td>1.0 Beta1</td> <td>1.0.?.0</td> <td>2000年9月</td> </tr> <tr> <td>1.0 Beta2</td> <td>1.0.2914.0</td> <td>2001年6月20日</td> </tr> <tr class="alternate"> <td>1.0 RTM</td> <td>1.0.3705.0</td> <td>2002年1月5日</td> </tr> <tr> <td>1.0 SP1</td> <td>1.0.3705.209</td> <td>2002年3月19日</td> </tr> <tr class="alternate"> <td>1.0 SP2</td> <td>1.0.3705.288</td> <td>2002年8月7日</td> </tr> <tr> <td>1.0 SP3</td> <td>1.0.3705.6018</td> <td>2004年8月31日</td> </tr> <tr class="alternate"> <td>1.1 RTM</td> <td>1.1.4322.573</td> <td>2003年4月1日</td> </tr> <tr> <td>1.1 SP1</td> <td>1.1.4322.2032</td> <td>2004年8月30日</td> </tr> <tr class="alternate"> <td>1.1 SP1 (Server 2003)</td> <td>1.1.4322.2300</td> <td>2005年3月30日</td> </tr> <tr> <td>2.0 RTM</td> <td>2.0.50727.42</td> <td>2005年11月7日</td> </tr> <tr class="alternate"> <td>2.0 RTM (Vista)</td> <td>2.0.50727.312</td> <td>2007年1月30日</td> </tr> <tr> <td>2.0 (KB928365)</td> <td>2.0.50727.832</td> <td>2007年7月10日</td> </tr> <tr class="alternate"> <td>2.0 SP1</td> <td>2.0.50727.1433</td> <td>2007年11月19日</td> </tr> <tr> <td>2.0 SP1 (Server 2008, Vista SP1)</td> <td>2.0.50727.1434</td> <td>2008年2月4日</td> </tr> <tr class="alternate"> <td>2.0 SP2</td> <td>2.0.50727.3053</td> <td>2008年8月12日</td> </tr> <tr> <td>3.0 RTM</td> <td>3.0.4506.30</td> <td>2006年11月6日</td> </tr> <tr class="alternate"> <td>3.0 RTM (Vista)</td> <td>3.0.4506.26</td> <td>2007年1月30日</td> </tr> <tr> <td>3.0 SP1</td> <td>3.0.4506.648</td> <td>2007年11月19日</td> </tr> <tr class="alternate"> <td>3.0 SP2</td> <td>3.0.4506.2123 (3.0.6920.1453)</td> <td>2008年8月12日</td> </tr> <tr> <td>3.5 RTM</td> <td>3.5.21022.8</td> <td>2007年11月19日</td> </tr> <tr class="alternate"> <td>3.5 SP1</td> <td>3.5.30729.1</td> <td>2008年8月12日</td> </tr> </tbody> </table> <table id="todo"> <thead> <tr> <th>What?</th> <th>When?</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>Paris Web 2007</td> <td>2007-11-15</td> <td>IBM La Défense / INSIA</td> </tr> <tr class="alternate"> <td>Paris On Rails 2007</td> <td>2007-12-10</td> <td>Cité des Sciences</td> </tr> <tr> <td>Burger Quiz party</td> <td>2007-04-14</td> <td>Volta</td> </tr> </tbody> </table> </html> programming/javascript.txt 最終更新: 2019/05/18 02:23by 非ログインユーザー