差分

このページの2つのバージョン間の差分を表示します。

--- programming:javascript [2008/11/12 23:35] – nakayama
+++ programming:javascript [2019/05/18 02:23] (現在) – 外部編集非ログインユーザー
@@ 行 1: / 行 1: @@
 <html>
-	<style type="text/css">
+  <style type="text/css">
-		thead
+    table {
-		{
+      margin: 0.5em 0;
-			background: #aaf no-repeat right center;
+      border: 1px solid black; border-collapse: collapse;
-		}
+      font-size: small;
-		tr.alternate *
+      font-family: sans-serif;
-		{
+    }
-			background-color: #ddd;
+    td, th {
-		}
+      padding: 0.2em 0.3em;
-	</style>
+      border: 1px solid silver;
-	<table id="table_sort" border="1">
+    }
-		<thead>
+    th {
-			<tr>
+      text-align: left;
-				<td>.NET バージョン</td>
+      padding-right: 20px;
-				<td>バージョン</td>
+      cursor: default;
-				<td>リリース日</td>
+    }
-		</thead>
-		<tbody>
+    thead th.sort-asc, thead th.sort-desc {
-			<tr>
+      background: #aaf url('sort-asc.png') no-repeat right center;
-				<td>Pre-beta</td>
+    }
-				<td>?.?.?.?</td>
+    thead th.sort-desc { background-image: url('sort-desc.png'); }
-				<td>2000年7月11日</td>
+    tr.alternate * { background-color: #ddd; }
-			</tr>
+  </style>
-			<tr class="alternate">
+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
-				<td>1.0 Beta1</td>
+  <script type="text/javascript">
-				<td>1.0.?.0</td>
+Element.addMethods({
-				<td>2000年9月</td>
+  collectTextNodes: function(element) {
-			</tr>
+    return $A($(element).childNodes).collect( function(node) {
-			<tr>
+      return (node.nodeType==3 ? node.nodeValue :
-				<td>1.0 Beta2</td>
+        (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
-				<td>1.0.2914.0</td>
+    }).flatten().join('');
-				<td>2001年6月20日</td>
+  }
-			</tr>
+});
-			<tr class="alternate">
-				<td>1.0 RTM</td>
+    var TableSorter = Class.create({
-				<td>1.0.3705.0</td>
+      initialize: function(element) {
-				<td>2002年1月5日</td>
+        this.element = $(element);
-			</tr>
+        this.sortIndex = -1;
-			<tr>
+        this.sortOrder = 'asc';
-				<td>1.0 SP1</td>
+        this.initDOMReferences();
-				<td>1.0.3705.209</td>
+        this.initEventHandlers();
-				<td>2002年3月19日</td>
+      }, // initialize
-			</tr>
-			<tr class="alternate">
+      initDOMReferences: function() {
-				<td>1.0 SP2</td>
+        var head = this.element.down('thead');
-				<td>1.0.3705.288</td>
+        var body = this.element.down('tbody');
-				<td>2002年8月7日</td>
+        if (!head || !body)
-			</tr>
+          throw 'テーブルには、ヘッダとソート可能なボディが必要です。';
-			<tr>
+        this.headers = head.down('tr').childElements();
-				<td>1.0 SP3</td>
+        this.headers.each(function(e, i) {
-				<td>1.0.3705.6018</td>
+          e._colIndex = i;
-				<td>2004年8月31日</td>
+        });
-			</tr>
+        this.body = body;
-			<tr class="alternate">
+      }, // initDOMReferences
-				<td>1.1 RTM</td>
-				<td>1.1.4322.573</td>
+      initEventHandlers: function() {
-				<td>2003年4月1日</td>
+        this.handler = this.handleHeaderClick.bind(this);
-			</tr>
+        this.element.observe('click', this.handler);
-			<tr>
+      }, // initEventHandlers
-				<td>1.1 SP1</td>
-				<td>1.1.4322.2032</td>
+      handleHeaderClick: function(e) {
-				<td>2004年8月30日</td>
+        var element = e.element();
-			</tr>
+        if (!('_colIndex' in element)) {
-			<tr class="alternate">
+          element = element.ancestors().find(function(elt) {
-				<td>1.1 SP1 (Server 2003)</td>
+            return '_colIndex' in elt;
-				<td>1.1.4322.2300</td>
+          });
-				<td>2005年3月30日</td>
+          if (!((element) && '_colIndex' in element))
-			</tr>
+            return;
-			<tr>
+        }
-				<td>2.0 RTM</td>
+        this.sort(element._colIndex);
-				<td>2.0.50727.42</td>
+      }, // handleHeaderClick
-				<td>2005年11月7日</td>
-			</tr>
+      adjustSortMarkers: function(index) {
-			<tr class="alternate">
+        if (this.sortIndex != -1)
-				<td>2.0 RTM (Vista)</td>
+          this.headers[this.sortIndex].removeClassName('sort-' +
-				<td>2.0.50727.312</td>
+            this.sortOrder);
-				<td>2007年1月30日</td>
+        if (this.sortIndex != index) {
-			</tr>
+          this.sortOrder = 'asc';
-			<tr>
+          this.sortIndex = index;
-				<td>2.0 (KB928365)</td>
+        } else
-				<td>2.0.50727.832</td>
+          this.sortOrder = ('asc' == this.sortOrder ? 'desc' : 'asc');
-				<td>2007年7月10日</td>
+        this.headers[index].addClassName('sort-' + this.sortOrder);
-			</tr>
+      }, // adjustSortMarkers
-			<tr class="alternate">
-				<td>2.0 SP1</td>
+      sort: function(index) {
-				<td>2.0.50727.1433</td>
+        this.adjustSortMarkers(index);
-				<td>2007年11月19日</td>
+        var rows = this.body.childElements();
-			</tr>
+        rows = rows.sortBy(function(row) {
-			<tr>
+          return row.childElements()[this.sortIndex].collectTextNodes();
-				<td>2.0 SP1 (Server 2008, Vista SP1)</td>
+        }.bind(this));
-				<td>2.0.50727.1434</td>
+        if ('desc' == this.sortOrder)
-				<td>2008年2月4日</td>
+          rows.reverse();
-			</tr>
+        rows.reverse().each(function(row, index) {
-			<tr class="alternate">
+          if (index > 0)
-				<td>2.0 SP2</td>
+            this.body.insertBefore(row, rows[index - 1]);
-				<td>2.0.50727.3053</td>
+        }.bind(this));
-				<td>2008年8月12日</td>
+        rows.reverse().each(function(row, index) {
-			</tr>
+          row[(1 == index % 2 ? 'add' : 'remove') + 'ClassName']('alternate');
-			<tr>
+        });
-				<td>3.0 RTM</td>
+      } // sort
-				<td>3.0.4506.30</td>
+    }); // TableSorter
-				<td>2006年11月6日</td>
-			</tr>
+    document.observe('dom:loaded', function() {
-			<tr class="alternate">
+      $$('table').each(function(table) { new TableSorter(table); });
-				<td>3.0 RTM (Vista)</td>
+    });
-				<td>3.0.4506.26</td>
+  </script>
-				<td>2007年1月30日</td>
+  <table id="netfw">
-			</tr>
+    <thead>
-			<tr>
+      <tr>
-				<td>3.0 SP1</td>
+        <th>.NET バージョン</th>
-				<td>3.0.4506.648</td>
+        <th>バージョン</th>
-				<td>2007年11月19日</td>
+        <th>リリース日</th>
-			</tr>
+      </tr>
-			<tr class="alternate">
+    </thead>
-				<td>3.0 SP2</td>
+    <tbody>
-				<td>3.0.4506.2123 (3.0.6920.1453)</td>
+      <tr>
-				<td>2008年8月12日</td>
+        <td>Pre-beta</td>
-			</tr>
+        <td>?.?.?.?</td>
-			<tr>
+        <td>2000年7月11日</td>
-				<td>3.5 RTM</td>
+      </tr>
-				<td>3.5.21022.8</td>
+      <tr class="alternate">
-				<td>2007年11月19日</td>
+        <td>1.0 Beta1</td>
-			</tr>
+        <td>1.0.?.0</td>
-			<tr class="alternate">
+        <td>2000年9月</td>
-				<td>3.5 SP1</td>
+      </tr>
-				<td>3.5.30729.1</td>
+      <tr>
-				<td>2008年8月12日</td>
+        <td>1.0 Beta2</td>
-			</tr>
+        <td>1.0.2914.0</td>
-		</tbody>
+        <td>2001年6月20日</td>
-	</table>
+      </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>