差分
このページの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> | ||
</ | </ |