2013年8月1日 星期四

table can sort and source and target

table sort sorted  and source and target


http://friedcell.si/js/SortedTable/examples.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>SortedTable example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="common.css" type="text/css" />
<script type="text/javascript" src="Event.js"></script>
<script type="text/javascript" src="SortedTable.js"></script>
<script type="text/javascript">//<![CDATA[
var sourceTable, destTable;
onload = function() {
sourceTable = new SortedTable('s');
destTable = new SortedTable('d');
mySorted = new SortedTable();
mySorted.colorize = function() {
for (var i=0;i<this.elements.length;i++) {
if (i%2){
this.changeClass(this.elements[i],'even','odd');
} else {
this.changeClass(this.elements[i],'odd','even');
}
}
}
mySorted.onsort = mySorted.colorize;
mySorted.onmove = mySorted.colorize;
mySorted.colorize();
secondTable = SortedTable.getSortedTable(document.getElementById('id'));
secondTable.allowDeselect = false;
}
function moveRows(s,d) {
var a = new Array();
for (var o in s.selectedElements) {
a.push(s.selectedElements[o]);
}
for (var o in a) {
var elm = a[o];
var tds = elm.getElementsByTagName('td');
for (var i in tds) {
if (tds[i].headers) tds[i].headers = d.table.id+''+tds[i].headers.substr(d.table.id.length);
}
d.body.appendChild(a[o]);
d.deselect(a[o]);
d.init(d.table);
d.sort();
s.deselect(a[o]);
s.init(s.table);
}
}
//]]></script>
<style type="text/css">
/* document styles */
.disclaimer {border-top:1px solid #ccc;color:#879AB7;padding-top:.5em;font-size:.9em;}
dl {margin:0 1em;padding:0;}
dl, form {float:left;}
li {padding:.1em 0;}
hr {clear:both;width:100%;background:#fff;height:0;border:0;border-bottom:1px solid #fff;margin:0 0 1em;padding:0;}
/* table styles */
table {border:0;padding:0;margin:0 0 1em;border-left:1px solid #336;border-top:1px solid #336;float:left;clear:left;}
tr {border:0;padding:0;margin:0;}
td, th {border:0;padding:2px 6px;margin:0;border-right:1px solid #336;border-bottom:1px solid #336;background-color:#EAEEF3;}
td[axis='number'], td[axis='date'] {text-align:right;}
th {white-space:no-wrap;background-color:#B4C4D1;padding:2px 20px;}
tfoot td {border-top:1px solid #003;}
thead th {border-bottom:2px solid #003;}
.odd td {background-color:#E8ECF1;}
.even td {background-color:#DDE5EB;}
.hover td {background-color:#A5B3C9;}
.sortedminus {background-color:#ecc;}
.sortedplus {background-color:#cec;}
.selrow td {background-color:#879AB7;}
/* source-dest example styles */
#s {float:left;}
#d {float:left;clear:none;}
form#tabletool {margin:0;padding:0.5em;}
form#tabletool fieldset {width:8em;text-align:center;}
form#tabletool legend {margin:0 auto;}
form#tabletool input {margin:0.5em;}
</style>
</head>
<body>
<h1>SortedTable instructions and examples v0.8f</h1>
<ul id="nav">
<li><a href="index.html">About</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="doc.html">Documentation</a></li>
</ul>
<div class="content">
<h2>Normal table with sample javascript calls</h2>
<table class="sorted regroup" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th id="order" class="sortedplus"><span>Order</span></th>
<th id="title"><span>Title</span></th>
<th id="date"><span>Date</span></th>
<th id="num"><span>Number</span></th>
<th id="desc"><span>Description</span></th>
<th id="publish"><span>PublishDate</span></th>
<th id="published" class="nosort"><span>Published</span></th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
<td>Footer 5</td>
<td>Footer 6</td>
<td>Footer 7</td>
</tr>
</tfoot>
<tbody>
<tr id="row1"><td axis="number" headers="order">1</td><td axis="string" headers="title">Title 1 </td><td axis="date" headers="date" title="2006-02-20">20.2.2006</td><td axis="number" headers="num">92</td><td axis="sstring" headers="desc">Description 1 </td><td axis="date" headers="publish" title="2005-08-01">1.8.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">2</td><td axis="string" headers="title">title 2 </td><td axis="date" headers="date" title="2006-08-04">4.8.2006</td><td axis="number" headers="num">71</td><td axis="sstring" headers="desc">description 2 </td><td axis="date" headers="publish" title="2005-03-05">5.3.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">3</td><td axis="string" headers="title">Title 3 </td><td axis="date" headers="date" title="2006-07-05">5.7.2006</td><td axis="number" headers="num">93</td><td axis="sstring" headers="desc">Description 3 </td><td axis="date" headers="publish" title="2006-08-04">4.8.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">4</td><td axis="string" headers="title">Title 4 </td><td axis="date" headers="date" title="2006-09-03">3.9.2006</td><td axis="number" headers="num">5</td><td axis="sstring" headers="desc">Description 4 </td><td axis="date" headers="publish" title="2006-09-18">18.9.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">5</td><td axis="string" headers="title">Title 5 </td><td axis="date" headers="date" title="2005-09-10">10.9.2005</td><td axis="number" headers="num">54</td><td axis="sstring" headers="desc">Description 5 </td><td axis="date" headers="publish" title="2005-08-23">23.8.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">6</td><td axis="string" headers="title">title 6 </td><td axis="date" headers="date" title="2004-12-21">21.12.2004</td><td axis="number" headers="num">90</td><td axis="sstring" headers="desc">description 6 </td><td axis="date" headers="publish" title="2005-10-18">18.10.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">7</td><td axis="string" headers="title">Title 7 </td><td axis="date" headers="date" title="2005-11-12">12.11.2005</td><td axis="number" headers="num">51</td><td axis="sstring" headers="desc">Description 7 </td><td axis="date" headers="publish" title="2005-10-02">2.10.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">8</td><td axis="string" headers="title">Title 8 </td><td axis="date" headers="date" title="2006-03-10">10.3.2006</td><td axis="number" headers="num">69</td><td axis="sstring" headers="desc">Description 8 </td><td axis="date" headers="publish" title="2005-05-08">8.5.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">9</td><td axis="string" headers="title">Title 9 </td><td axis="date" headers="date" title="2005-08-22">22.8.2005</td><td axis="number" headers="num">57</td><td axis="sstring" headers="desc">Description 9 </td><td axis="date" headers="publish" title="2005-06-09">9.6.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">10</td><td axis="string" headers="title">title 10 </td><td axis="date" headers="date" title="2005-12-02">2.12.2005</td><td axis="number" headers="num">21</td><td axis="sstring" headers="desc">description 10 </td><td axis="date" headers="publish" title="2006-09-19">19.9.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">11</td><td axis="string" headers="title">Title 11 </td><td axis="date" headers="date" title="2005-05-07">7.5.2005</td><td axis="number" headers="num">42</td><td axis="sstring" headers="desc">Description 11 </td><td axis="date" headers="publish" title="2005-07-03">3.7.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">12</td><td axis="string" headers="title">title 12</td><td axis="date" headers="date" title="2005-07-11">11.7.2005</td><td axis="number" headers="num">94</td><td axis="sstring" headers="desc">Description 12</td><td axis="date" headers="publish" title="2006-01-31">31.1.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">13</td><td axis="string" headers="title">Title 13</td><td axis="date" headers="date" title="2005-01-02">2.1.2005</td><td axis="number" headers="num">81</td><td axis="sstring" headers="desc">Description 13</td><td axis="date" headers="publish" title="2005-07-16">16.7.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">14</td><td axis="string" headers="title">title 14</td><td axis="date" headers="date" title="2005-08-18">18.8.2005</td><td axis="number" headers="num">72</td><td axis="sstring" headers="desc">description 14</td><td axis="date" headers="publish" title="2005-05-05">5.5.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">15</td><td axis="string" headers="title">Title 15</td><td axis="date" headers="date" title="2005-10-17">17.10.2005</td><td axis="number" headers="num">90</td><td axis="sstring" headers="desc">Description 15</td><td axis="date" headers="publish" title="2006-03-17">17.3.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">16</td><td axis="string" headers="title">Title 16</td><td axis="date" headers="date" title="2005-07-22">22.7.2005</td><td axis="number" headers="num">13</td><td axis="sstring" headers="desc">description 16</td><td axis="date" headers="publish" title="2006-04-30">30.4.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">17</td><td axis="string" headers="title">Title 17</td><td axis="date" headers="date" title="2006-01-12">12.1.2006</td><td axis="number" headers="num">34</td><td axis="sstring" headers="desc">Description 17</td><td axis="date" headers="publish" title="2006-03-01">1.3.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">18</td><td axis="string" headers="title">Title 18</td><td axis="date" headers="date" title="2005-06-06">6.6.2005</td><td axis="number" headers="num">53</td><td axis="sstring" headers="desc">description 18</td><td axis="date" headers="publish" title="2005-05-06">6.5.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">19</td><td axis="string" headers="title">Title 19</td><td axis="date" headers="date" title="2006-09-22">22.9.2006</td><td axis="number" headers="num">60</td><td axis="sstring" headers="desc">description 19</td><td axis="date" headers="publish" title="2006-09-20">20.9.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">20</td><td axis="string" headers="title">title 20</td><td axis="date" headers="date" title="2006-09-10">10.9.2006</td><td axis="number" headers="num">3</td><td axis="sstring" headers="desc">description 20</td><td axis="date" headers="publish" title="2006-03-29">29.3.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">21</td><td axis="string" headers="title">title 21</td><td axis="date" headers="date" title="2005-07-24">24.7.2005</td><td axis="number" headers="num">74</td><td axis="sstring" headers="desc">Description 21</td><td axis="date" headers="publish" title="2005-05-19">19.5.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">22</td><td axis="string" headers="title">Title 22</td><td axis="date" headers="date" title="2005-01-24">24.1.2005</td><td axis="number" headers="num">98</td><td axis="sstring" headers="desc">Description 22</td><td axis="date" headers="publish" title="2005-09-15">15.9.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">23</td><td axis="string" headers="title">title 23</td><td axis="date" headers="date" title="2005-07-15">15.7.2005</td><td axis="number" headers="num">66</td><td axis="sstring" headers="desc">Description 23</td><td axis="date" headers="publish" title="2005-09-05">5.9.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">24</td><td axis="string" headers="title">Title 24</td><td axis="date" headers="date" title="2005-06-22">22.6.2005</td><td axis="number" headers="num">88</td><td axis="sstring" headers="desc">Description 24</td><td axis="date" headers="publish" title="2005-10-10">10.10.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">25</td><td axis="string" headers="title">title 25</td><td axis="date" headers="date" title="2004-12-25">25.12.2004</td><td axis="number" headers="num">8</td><td axis="sstring" headers="desc">Description 25</td><td axis="date" headers="publish" title="2006-02-19">19.2.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">26</td><td axis="string" headers="title">Title 26</td><td axis="date" headers="date" title="2006-07-29">29.7.2006</td><td axis="number" headers="num">59</td><td axis="sstring" headers="desc">description 26</td><td axis="date" headers="publish" title="2005-02-17">17.2.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">27</td><td axis="string" headers="title">Title 27</td><td axis="date" headers="date" title="2006-03-21">21.3.2006</td><td axis="number" headers="num">38</td><td axis="sstring" headers="desc">Description 27</td><td axis="date" headers="publish" title="2006-05-09">9.5.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">28</td><td axis="string" headers="title">Title 28</td><td axis="date" headers="date" title="2006-01-12">12.1.2006</td><td axis="number" headers="num">68</td><td axis="sstring" headers="desc">Description 28</td><td axis="date" headers="publish" title="2005-03-08">8.3.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">29</td><td axis="string" headers="title">title 29</td><td axis="date" headers="date" title="2005-02-05">5.2.2005</td><td axis="number" headers="num">95</td><td axis="sstring" headers="desc">Description 29</td><td axis="date" headers="publish" title="2006-08-03">3.8.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">30</td><td axis="string" headers="title">Title 30</td><td axis="date" headers="date" title="2006-06-28">28.6.2006</td><td axis="number" headers="num">24</td><td axis="sstring" headers="desc">description 30</td><td axis="date" headers="publish" title="2004-11-30">30.11.2004</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">31</td><td axis="string" headers="title">Title 31</td><td axis="date" headers="date" title="2006-08-22">22.8.2006</td><td axis="number" headers="num">53</td><td axis="sstring" headers="desc">Description 31</td><td axis="date" headers="publish" title="2006-02-15">15.2.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">32</td><td axis="string" headers="title">Title 32</td><td axis="date" headers="date" title="2005-09-05">5.9.2005</td><td axis="number" headers="num">12</td><td axis="sstring" headers="desc">Description 32</td><td axis="date" headers="publish" title="2006-04-09">9.4.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">33</td><td axis="string" headers="title">Title 33</td><td axis="date" headers="date" title="2006-07-16">16.7.2006</td><td axis="number" headers="num">90</td><td axis="sstring" headers="desc">Description 33</td><td axis="date" headers="publish" title="2005-08-05">5.8.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">34</td><td axis="string" headers="title">title 34</td><td axis="date" headers="date" title="2005-10-20">20.10.2005</td><td axis="number" headers="num">54</td><td axis="sstring" headers="desc">Description 34</td><td axis="date" headers="publish" title="2006-09-18">18.9.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">35</td><td axis="string" headers="title">Title 35</td><td axis="date" headers="date" title="2005-11-01">1.11.2005</td><td axis="number" headers="num">31</td><td axis="sstring" headers="desc">Description 35</td><td axis="date" headers="publish" title="2006-08-10">10.8.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">36</td><td axis="string" headers="title">title 36</td><td axis="date" headers="date" title="2005-08-06">6.8.2005</td><td axis="number" headers="num">62</td><td axis="sstring" headers="desc">Description 36</td><td axis="date" headers="publish" title="2005-05-28">28.5.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">37</td><td axis="string" headers="title">Title 37</td><td axis="date" headers="date" title="2005-08-25">25.8.2005</td><td axis="number" headers="num">44</td><td axis="sstring" headers="desc">Description 37</td><td axis="date" headers="publish" title="2005-05-18">18.5.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">38</td><td axis="string" headers="title">title 38</td><td axis="date" headers="date" title="2005-11-04">4.11.2005</td><td axis="number" headers="num">66</td><td axis="sstring" headers="desc">description 38</td><td axis="date" headers="publish" title="2005-07-08">8.7.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">39</td><td axis="string" headers="title">Title 39</td><td axis="date" headers="date" title="2006-06-25">25.6.2006</td><td axis="number" headers="num">44</td><td axis="sstring" headers="desc">description 39</td><td axis="date" headers="publish" title="2006-04-12">12.4.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">40</td><td axis="string" headers="title">title 40</td><td axis="date" headers="date" title="2005-05-18">18.5.2005</td><td axis="number" headers="num">22</td><td axis="sstring" headers="desc">Description 40</td><td axis="date" headers="publish" title="2005-04-24">24.4.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">41</td><td axis="string" headers="title">Title 41</td><td axis="date" headers="date" title="2004-12-25">25.12.2004</td><td axis="number" headers="num">85</td><td axis="sstring" headers="desc">Description 41</td><td axis="date" headers="publish" title="2005-12-28">28.12.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">42</td><td axis="string" headers="title">Title 42</td><td axis="date" headers="date" title="2005-10-24">24.10.2005</td><td axis="number" headers="num">5</td><td axis="sstring" headers="desc">description 42</td><td axis="date" headers="publish" title="2006-11-14">14.11.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">43</td><td axis="string" headers="title">title 43</td><td axis="date" headers="date" title="2006-02-05">5.2.2006</td><td axis="number" headers="num">76</td><td axis="sstring" headers="desc">Description 43</td><td axis="date" headers="publish" title="2005-10-02">2.10.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">44</td><td axis="string" headers="title">Title 44</td><td axis="date" headers="date" title="2005-01-05">5.1.2005</td><td axis="number" headers="num">5</td><td axis="sstring" headers="desc">description 44</td><td axis="date" headers="publish" title="2005-08-25">25.8.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">45</td><td axis="string" headers="title">title 45</td><td axis="date" headers="date" title="2006-04-25">25.4.2006</td><td axis="number" headers="num">18</td><td axis="sstring" headers="desc">Description 45</td><td axis="date" headers="publish" title="2005-05-21">21.5.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">46</td><td axis="string" headers="title">Title 46</td><td axis="date" headers="date" title="2004-12-06">6.12.2004</td><td axis="number" headers="num">3</td><td axis="sstring" headers="desc">Description 46</td><td axis="date" headers="publish" title="2006-03-19">19.3.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">47</td><td axis="string" headers="title">Title 47</td><td axis="date" headers="date" title="2005-01-16">16.1.2005</td><td axis="number" headers="num">82</td><td axis="sstring" headers="desc">description 47</td><td axis="date" headers="publish" title="2006-03-12">12.3.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">48</td><td axis="string" headers="title">title 48</td><td axis="date" headers="date" title="2006-01-22">22.1.2006</td><td axis="number" headers="num">80</td><td axis="sstring" headers="desc">Description 48</td><td axis="date" headers="publish" title="2005-06-12">12.6.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">49</td><td axis="string" headers="title">Title 49</td><td axis="date" headers="date" title="2006-10-31">31.10.2006</td><td axis="number" headers="num">82</td><td axis="sstring" headers="desc">Description 49</td><td axis="date" headers="publish" title="2005-01-03">3.1.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">50</td><td axis="string" headers="title">Title 50</td><td axis="date" headers="date" title="2006-10-09">9.10.2006</td><td axis="number" headers="num">28</td><td axis="sstring" headers="desc">Description 50</td><td axis="date" headers="publish" title="2005-06-14">14.6.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">51</td><td axis="string" headers="title">Title 51</td><td axis="date" headers="date" title="2006-11-18">18.11.2006</td><td axis="number" headers="num">48</td><td axis="sstring" headers="desc">Description 51</td><td axis="date" headers="publish" title="2004-12-23">23.12.2004</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">52</td><td axis="string" headers="title">Title 52</td><td axis="date" headers="date" title="2005-01-17">17.1.2005</td><td axis="number" headers="num">34</td><td axis="sstring" headers="desc">description 52</td><td axis="date" headers="publish" title="2005-04-07">7.4.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">53</td><td axis="string" headers="title">Title 53</td><td axis="date" headers="date" title="2005-11-08">8.11.2005</td><td axis="number" headers="num">12</td><td axis="sstring" headers="desc">Description 53</td><td axis="date" headers="publish" title="2006-06-24">24.6.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">54</td><td axis="string" headers="title">title 54</td><td axis="date" headers="date" title="2005-08-19">19.8.2005</td><td axis="number" headers="num">30</td><td axis="sstring" headers="desc">Description 54</td><td axis="date" headers="publish" title="2005-01-27">27.1.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">55</td><td axis="string" headers="title">Title 55</td><td axis="date" headers="date" title="2005-09-02">2.9.2005</td><td axis="number" headers="num">66</td><td axis="sstring" headers="desc">description 55</td><td axis="date" headers="publish" title="2005-06-19">19.6.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">56</td><td axis="string" headers="title">title 56</td><td axis="date" headers="date" title="2005-02-16">16.2.2005</td><td axis="number" headers="num">58</td><td axis="sstring" headers="desc">Description 56</td><td axis="date" headers="publish" title="2006-07-06">6.7.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">57</td><td axis="string" headers="title">title 57</td><td axis="date" headers="date" title="2005-11-27">27.11.2005</td><td axis="number" headers="num">29</td><td axis="sstring" headers="desc">Description 57</td><td axis="date" headers="publish" title="2006-08-01">1.8.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">58</td><td axis="string" headers="title">Title 58</td><td axis="date" headers="date" title="2005-09-24">24.9.2005</td><td axis="number" headers="num">70</td><td axis="sstring" headers="desc">Description 58</td><td axis="date" headers="publish" title="2006-10-19">19.10.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">59</td><td axis="string" headers="title">title 59</td><td axis="date" headers="date" title="2005-08-17">17.8.2005</td><td axis="number" headers="num">64</td><td axis="sstring" headers="desc">description 59</td><td axis="date" headers="publish" title="2006-09-04">4.9.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">60</td><td axis="string" headers="title">Title 60</td><td axis="date" headers="date" title="2006-11-17">17.11.2006</td><td axis="number" headers="num">35</td><td axis="sstring" headers="desc">description 60</td><td axis="date" headers="publish" title="2005-08-02">2.8.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">61</td><td axis="string" headers="title">Title 61</td><td axis="date" headers="date" title="2006-08-25">25.8.2006</td><td axis="number" headers="num">11</td><td axis="sstring" headers="desc">Description 61</td><td axis="date" headers="publish" title="2005-10-20">20.10.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">62</td><td axis="string" headers="title">Title 62</td><td axis="date" headers="date" title="2006-05-04">4.5.2006</td><td axis="number" headers="num">9</td><td axis="sstring" headers="desc">Description 62</td><td axis="date" headers="publish" title="2006-09-26">26.9.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">63</td><td axis="string" headers="title">Title 63</td><td axis="date" headers="date" title="2004-12-31">31.12.2004</td><td axis="number" headers="num">44</td><td axis="sstring" headers="desc">description 63</td><td axis="date" headers="publish" title="2005-01-26">26.1.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">64</td><td axis="string" headers="title">title 64</td><td axis="date" headers="date" title="2005-09-20">20.9.2005</td><td axis="number" headers="num">31</td><td axis="sstring" headers="desc">Description 64</td><td axis="date" headers="publish" title="2005-11-14">14.11.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">65</td><td axis="string" headers="title">Title 65</td><td axis="date" headers="date" title="2006-08-24">24.8.2006</td><td axis="number" headers="num">45</td><td axis="sstring" headers="desc">Description 65</td><td axis="date" headers="publish" title="2006-11-12">12.11.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">66</td><td axis="string" headers="title">Title 66</td><td axis="date" headers="date" title="2005-03-16">16.3.2005</td><td axis="number" headers="num">42</td><td axis="sstring" headers="desc">description 66</td><td axis="date" headers="publish" title="2005-08-11">11.8.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">67</td><td axis="string" headers="title">title 67</td><td axis="date" headers="date" title="2005-03-16">16.3.2005</td><td axis="number" headers="num">81</td><td axis="sstring" headers="desc">Description 67</td><td axis="date" headers="publish" title="2006-04-12">12.4.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">68</td><td axis="string" headers="title">Title 68</td><td axis="date" headers="date" title="2004-12-31">31.12.2004</td><td axis="number" headers="num">68</td><td axis="sstring" headers="desc">Description 68</td><td axis="date" headers="publish" title="2005-12-20">20.12.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">69</td><td axis="string" headers="title">Title 69</td><td axis="date" headers="date" title="2005-10-26">26.10.2005</td><td axis="number" headers="num">91</td><td axis="sstring" headers="desc">description 69</td><td axis="date" headers="publish" title="2005-04-16">16.4.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">70</td><td axis="string" headers="title">Title 70</td><td axis="date" headers="date" title="2006-07-26">26.7.2006</td><td axis="number" headers="num">65</td><td axis="sstring" headers="desc">Description 70</td><td axis="date" headers="publish" title="2006-11-29">29.11.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">71</td><td axis="string" headers="title">Title 71</td><td axis="date" headers="date" title="2005-11-15">15.11.2005</td><td axis="number" headers="num">29</td><td axis="sstring" headers="desc">description 71</td><td axis="date" headers="publish" title="2005-05-11">11.5.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">72</td><td axis="string" headers="title">title 72</td><td axis="date" headers="date" title="2004-12-25">25.12.2004</td><td axis="number" headers="num">91</td><td axis="sstring" headers="desc">Description 72</td><td axis="date" headers="publish" title="2005-07-27">27.7.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">73</td><td axis="string" headers="title">title 73</td><td axis="date" headers="date" title="2006-07-02">2.7.2006</td><td axis="number" headers="num">86</td><td axis="sstring" headers="desc">description 73</td><td axis="date" headers="publish" title="2006-11-05">5.11.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">74</td><td axis="string" headers="title">Title 74</td><td axis="date" headers="date" title="2006-04-03">3.4.2006</td><td axis="number" headers="num">7</td><td axis="sstring" headers="desc">description 74</td><td axis="date" headers="publish" title="2005-06-20">20.6.2005</td><td headers="published">o</td></tr>
</tbody>
<tbody>
<tr><td axis="number" headers="order">75</td><td axis="string" headers="title">Title 75</td><td axis="date" headers="date" title="2006-01-16">16.1.2006</td><td axis="number" headers="num">31</td><td axis="sstring" headers="desc">description 75</td><td axis="date" headers="publish" title="2005-08-08">8.8.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">76</td><td axis="string" headers="title">Title 76</td><td axis="date" headers="date" title="2005-09-24">24.9.2005</td><td axis="number" headers="num">86</td><td axis="sstring" headers="desc">Description 76</td><td axis="date" headers="publish" title="2005-10-07">7.10.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">77</td><td axis="string" headers="title">title 77</td><td axis="date" headers="date" title="2004-12-05">5.12.2004</td><td axis="number" headers="num">42</td><td axis="sstring" headers="desc">description 77</td><td axis="date" headers="publish" title="2006-05-13">13.5.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">78</td><td axis="string" headers="title">Title 78</td><td axis="date" headers="date" title="2005-12-06">6.12.2005</td><td axis="number" headers="num">44</td><td axis="sstring" headers="desc">Description 78</td><td axis="date" headers="publish" title="2005-01-19">19.1.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">79</td><td axis="string" headers="title">Title 79</td><td axis="date" headers="date" title="2006-10-22">22.10.2006</td><td axis="number" headers="num">98</td><td axis="sstring" headers="desc">Description 79</td><td axis="date" headers="publish" title="2005-04-08">8.4.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">80</td><td axis="string" headers="title">Title 80</td><td axis="date" headers="date" title="2006-09-28">28.9.2006</td><td axis="number" headers="num">57</td><td axis="sstring" headers="desc">Description 80</td><td axis="date" headers="publish" title="2005-03-23">23.3.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">81</td><td axis="string" headers="title">Title 81</td><td axis="date" headers="date" title="2005-12-20">20.12.2005</td><td axis="number" headers="num">22</td><td axis="sstring" headers="desc">description 81</td><td axis="date" headers="publish" title="2006-09-01">1.9.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">82</td><td axis="string" headers="title">Title 82</td><td axis="date" headers="date" title="2006-01-01">1.1.2006</td><td axis="number" headers="num">39</td><td axis="sstring" headers="desc">Description 82</td><td axis="date" headers="publish" title="2005-11-15">15.11.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">83</td><td axis="string" headers="title">title 83</td><td axis="date" headers="date" title="2005-07-16">16.7.2005</td><td axis="number" headers="num">1</td><td axis="sstring" headers="desc">Description 83</td><td axis="date" headers="publish" title="2005-11-17">17.11.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">84</td><td axis="string" headers="title">Title 84</td><td axis="date" headers="date" title="2005-07-12">12.7.2005</td><td axis="number" headers="num">55</td><td axis="sstring" headers="desc">description 84</td><td axis="date" headers="publish" title="2005-11-08">8.11.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">85</td><td axis="string" headers="title">title 85</td><td axis="date" headers="date" title="2006-03-20">20.3.2006</td><td axis="number" headers="num">67</td><td axis="sstring" headers="desc">description 85</td><td axis="date" headers="publish" title="2005-01-18">18.1.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">86</td><td axis="string" headers="title">title 86</td><td axis="date" headers="date" title="2006-02-20">20.2.2006</td><td axis="number" headers="num">96</td><td axis="sstring" headers="desc">description 86</td><td axis="date" headers="publish" title="2005-05-03">3.5.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">87</td><td axis="string" headers="title">Title 87</td><td axis="date" headers="date" title="2005-08-31">31.8.2005</td><td axis="number" headers="num">96</td><td axis="sstring" headers="desc">Description 87</td><td axis="date" headers="publish" title="2006-02-18">18.2.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">88</td><td axis="string" headers="title">Title 88</td><td axis="date" headers="date" title="2005-04-06">6.4.2005</td><td axis="number" headers="num">29</td><td axis="sstring" headers="desc">Description 88</td><td axis="date" headers="publish" title="2006-07-31">31.7.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">89</td><td axis="string" headers="title">Title 89</td><td axis="date" headers="date" title="2005-10-27">27.10.2005</td><td axis="number" headers="num">52</td><td axis="sstring" headers="desc">Description 89</td><td axis="date" headers="publish" title="2005-09-09">9.9.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">90</td><td axis="string" headers="title">Title 90</td><td axis="date" headers="date" title="2005-06-21">21.6.2005</td><td axis="number" headers="num">74</td><td axis="sstring" headers="desc">description 90</td><td axis="date" headers="publish" title="2005-07-15">15.7.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">91</td><td axis="string" headers="title">Title 91</td><td axis="date" headers="date" title="2006-02-10">10.2.2006</td><td axis="number" headers="num">17</td><td axis="sstring" headers="desc">Description 91</td><td axis="date" headers="publish" title="2005-11-16">16.11.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">92</td><td axis="string" headers="title">title 92</td><td axis="date" headers="date" title="2005-07-02">2.7.2005</td><td axis="number" headers="num">47</td><td axis="sstring" headers="desc">Description 92</td><td axis="date" headers="publish" title="2005-06-20">20.6.2005</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">93</td><td axis="string" headers="title">title 93</td><td axis="date" headers="date" title="2005-05-04">4.5.2005</td><td axis="number" headers="num">87</td><td axis="sstring" headers="desc">description 93</td><td axis="date" headers="publish" title="2005-12-17">17.12.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">94</td><td axis="string" headers="title">title 94</td><td axis="date" headers="date" title="2005-07-24">24.7.2005</td><td axis="number" headers="num">9</td><td axis="sstring" headers="desc">description 94</td><td axis="date" headers="publish" title="2006-02-10">10.2.2006</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">95</td><td axis="string" headers="title">title 95</td><td axis="date" headers="date" title="2006-06-06">6.6.2006</td><td axis="number" headers="num">7</td><td axis="sstring" headers="desc">description 95</td><td axis="date" headers="publish" title="2004-12-14">14.12.2004</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">96</td><td axis="string" headers="title">Title 96</td><td axis="date" headers="date" title="2005-08-26">26.8.2005</td><td axis="number" headers="num">1</td><td axis="sstring" headers="desc">description 96</td><td axis="date" headers="publish" title="2006-06-04">4.6.2006</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">97</td><td axis="string" headers="title">Title 97</td><td axis="date" headers="date" title="2006-03-14">14.3.2006</td><td axis="number" headers="num">75</td><td axis="sstring" headers="desc">Description 97</td><td axis="date" headers="publish" title="2004-12-11">11.12.2004</td><td headers="published">x</td></tr>
<tr><td axis="number" headers="order">98</td><td axis="string" headers="title">title 98</td><td axis="date" headers="date" title="2005-04-04">4.4.2005</td><td axis="number" headers="num">51</td><td axis="sstring" headers="desc">Description 98</td><td axis="date" headers="publish" title="2005-05-06">6.5.2005</td><td headers="published">o</td></tr>
<tr><td axis="number" headers="order">99</td><td axis="string" headers="title">title 99</td><td axis="date" headers="date" title="2006-11-29">29.11.2006</td><td axis="number" headers="num">5</td><td axis="sstring" headers="desc">Description 99</td><td axis="date" headers="publish" title="2005-09-30">30.9.2005</td><td headers="published">o</td></tr>
</tbody>
</table>
<dl>
<dt>Common public calls:</dt>
<!-- you can call move on a table -->
<dd><a href="javascript:mySorted.move(1,document.getElementById('row1'))">move specific row up</a></dd>
<dd><a href="javascript:mySorted.move(1)">move selected row(s) up</a></dd>
<!-- you can also call it through a static method; the static method to move selected rows is different, it uses the element just to get the table -->
<dd><a href="javascript:SortedTable.move(-1,document.getElementById('row1'))">move specific row down</a></dd>
<dd><a href="javascript:SortedTable.moveSelected(-1,document.getElementById('row1'))">move selected row(s) down</a></dd>
<!-- calling a method on the table -->
<dd><a href="javascript:mySorted.cleansort()">clean sort</a></dd>
<!-- finding the table through a static method with a child element and then calling the method -->
<dd><a href="javascript:SortedTable.getSortedTable(document.getElementById('row1')).cleanselect()">clean selection</a></dd>
</dl>
<hr/>
<h2>Table automatically sorted</h2>
<p>Includes examples of sorting numbers, sensitive strings, dates, floats, currencies. Disallows selects by clicking the selected row.</p>
<table class="sorted" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th id="id"><span>ID</span></th>
<th id="name" class="sortedminus"><span>Name</span></th>
<th id="birth"><span>Birth</span></th>
<th id="ratio"><span>Ratio</span></th>
<th id="earn"><span>Earnings</span></th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
<td>Footer 5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td axis="number" headers="id">1</td>
<td axis="sstring" headers="name">Player 9</td>
<td axis="date" headers="birth" title="1985-11-10">10.11.1985</td>
<td axis="number" headers="ratio" title="1.3013">1,3013</td>
<td axis="number" headers="earn" title="941751.75">€ 941.751,75</td>
</tr>
<tr>
<td axis="number" headers="id">2</td>
<td axis="sstring" headers="name">Player 10</td>
<td axis="date" headers="birth" title="1985-10-11">11.10.1985</td>
<td axis="number" headers="ratio" title="1.7353">1,7353</td>
<td axis="number" headers="earn" title="813551.04">€ 813.551,04</td>
</tr>
<tr>
<td axis="number" headers="id">3</td>
<td axis="sstring" headers="name">player 3</td>
<td axis="date" headers="birth" title="1985-10-12">12.10.1985</td>
<td axis="number" headers="ratio" title="1.7210">1,7210</td>
<td axis="number" headers="earn" title="1123885.17">€ 1.123.885,17</td>
</tr>
<tr>
<td axis="number" headers="id">4</td>
<td axis="sstring" headers="name">player 2</td>
<td axis="date" headers="birth" title="1985-11-12">12.11.1985</td>
<td axis="number" headers="ratio" title="1.5362">1,5362</td>
<td axis="number" headers="earn" title="772255.99">€ 772.255,99</td>
</tr>
<tr>
<td axis="number" headers="id">5</td>
<td axis="sstring" headers="name">&nbsp;</td>
<td axis="date" headers="birth" title="1985-10-13">13.10.1985</td>
<td axis="number" headers="ratio" title="1.6823">1,6823</td>
<td axis="number" headers="earn" title="985123.32">€ 985.123,32</td>
</tr>
<tr>
<td axis="number" headers="id">-</td>
<td axis="sstring" headers="name">player x</td>
<td axis="date" headers="birth" title="1985-01-01">1.1.1985</td>
<td axis="number" headers="ratio">-</td>
<td axis="number" headers="earn" title="881234.66">€ 881.234,66</td>
</tr>
<tr>
<td axis="number" headers="id">-</td>
<td axis="sstring" headers="name">player y</td>
<td axis="date" headers="birth" title="1986-01-01">1.1.1986</td>
<td axis="number" headers="ratio">-</td>
<td axis="number" headers="earn" title="881234.66">€ 881.234,66</td>
</tr>
</tbody>
</table>
<hr/>
<h2>Move from table to table</h2>
<table class="sorted" id="s" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th id="sid"><span>ID</span></th>
<th id="sname"><span>Name</span></th>
<th id="sbirth"><span>Birth</span></th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td axis="number" headers="sid">1</td>
<td axis="string" headers="sname">Title 4</td>
<td axis="date" headers="sbirth" title="2005-11-10">10.11.2005</td>
</tr>
<tr>
<td axis="number" headers="sid">2</td>
<td axis="string" headers="sname">Title 1</td>
<td axis="date" headers="sbirth" title="2005-10-11">11.10.2005</td>
</tr>
<tr>
<td axis="number" headers="sid">3</td>
<td axis="string" headers="sname">title 3</td>
<td axis="date" headers="sbirth" title="2005-10-12">12.10.2005</td>
</tr>
</tbody>
</table>
<form id="tabletool" action="#" method="get">
<fieldset>
<legend>Move rows</legend>
<input type="button" value=" &laquo; " onclick="moveRows(destTable,sourceTable)" />
<input type="button" value=" &raquo; " onclick="moveRows(sourceTable,destTable)" />
</fieldset>
</form>
<table class="sorted" id="d" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th id="did"><span>ID</span></th>
<th id="dname"><span>Name</span></th>
<th id="dbirth"><span>Birth</span></th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td axis="number" headers="did">4</td>
<td axis="string" headers="dname">title 2</td>
<td axis="date" headers="dbirth" title="2005-10-12">12.11.2005</td>
</tr>
</tbody>
</table>
<hr/>
<p class="disclaimer">
The dates in the table are in European format (dd.mm.yyyy). Title field in the first table is sorted case insensitively while description field is sorted case sensitively.
</p>
</div>
</body>
</html>
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)