差分
このページの2つのバージョン間の差分を表示します。
| 次のリビジョン | 前のリビジョン | ||
| programming:javascript [2008/11/12 23:07] – 作成 nakayama | programming:javascript [2019/05/18 02:23] (現在) – 外部編集 非ログインユーザー | ||
|---|---|---|---|
| 行 1: | 行 1: | ||
| < | < | ||
| - | <teble id="teble_sort"> | + | |
| - | < | + | table { |
| - | < | + | margin: 0.5em 0; |
| - | <td>.NET バージョン</ | + | border: 1px solid black; border-collapse: |
| - | <td> | + | font-size: small; |
| - | <td> | + | font-family: |
| - | </ | + | } |
| - | < | + | td, th { |
| - | < | + | padding: 0.2em 0.3em; |
| - | < | + | border: 1px solid silver; |
| - | < | + | } |
| - | < | + | th { |
| - | </ | + | text-align: left; |
| - | < | + | padding-right: |
| - | < | + | cursor: default; |
| - | < | + | } |
| - | < | + | |
| - | </ | + | thead th.sort-asc, |
| - | < | + | background: #aaf url(' |
| - | < | + | } |
| - | < | + | thead th.sort-desc { background-image: |
| - | < | + | tr.alternate * { background-color: |
| - | </ | + | </ |
| - | < | + | <script type=" |
| - | < | + | <script type=" |
| - | < | + | Element.addMethods({ |
| - | < | + | collectTextNodes: |
| - | </ | + | 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 = ' |
| - | < | + | this.initDOMReferences(); |
| - | < | + | this.initEventHandlers(); |
| - | < | + | }, // initialize |
| - | </ | + | |
| - | < | + | initDOMReferences: |
| - | < | + | var head = this.element.down(' |
| - | < | + | var body = this.element.down(' |
| - | < | + | if (!head || !body) |
| - | </ | + | throw ' |
| - | < | + | this.headers = head.down(' |
| - | < | + | this.headers.each(function(e, |
| - | < | + | e._colIndex = i; |
| - | < | + | }); |
| - | </ | + | this.body = body; |
| - | < | + | }, // initDOMReferences |
| - | < | + | |
| - | < | + | initEventHandlers: |
| - | < | + | this.handler = this.handleHeaderClick.bind(this); |
| - | </ | + | this.element.observe(' |
| - | < | + | }, // initEventHandlers |
| - | < | + | |
| - | < | + | handleHeaderClick: |
| - | < | + | var element = e.element(); |
| - | </ | + | if (!(' |
| - | < | + | element = element.ancestors().find(function(elt) { |
| - | < | + | return ' |
| - | < | + | }); |
| - | < | + | if (!((element) && ' |
| - | </ | + | return; |
| - | < | + | } |
| - | < | + | this.sort(element._colIndex); |
| - | < | + | }, // handleHeaderClick |
| - | < | + | |
| - | </ | + | adjustSortMarkers: |
| - | < | + | if (this.sortIndex != -1) |
| - | < | + | this.headers[this.sortIndex].removeClassName(' |
| - | < | + | this.sortOrder); |
| - | < | + | if (this.sortIndex != index) { |
| - | </ | + | this.sortOrder = ' |
| - | < | + | this.sortIndex = index; |
| - | < | + | } else |
| - | < | + | this.sortOrder = (' |
| - | < | + | this.headers[index].addClassName(' |
| - | </ | + | }, // 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 (' |
| - | < | + | rows.reverse(); |
| - | </ | + | rows.reverse().each(function(row, |
| - | < | + | if (index > 0) |
| - | < | + | this.body.insertBefore(row, |
| - | < | + | }.bind(this)); |
| - | < | + | rows.reverse().each(function(row, |
| - | </ | + | row[(1 == index % 2 ? ' |
| - | < | + | }); |
| - | < | + | } // sort |
| - | < | + | }); // TableSorter |
| - | < | + | |
| - | </ | + | document.observe(' |
| - | < | + | $$(' |
| - | < | + | }); |
| - | < | + | </ |
| - | < | + | < |
| - | </ | + | < |
| - | < | + | < |
| - | < | + | <th>.NET バージョン</ |
| - | < | + | <th> |
| - | < | + | <th> |
| - | </ | + | </tr> |
| - | < | + | </ |
| - | < | + | < |
| - | < | + | < |
| - | < | + | < |
| - | </ | + | < |
| - | </ | + | < |
| - | </teble> | + | </ |
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | <table id=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <tr class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | |||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | | ||
| + | </ | ||
| + | </table> | ||
| </ | </ | ||