JS排序表格
| 英文 | 中文 | 数字 | 日期 | 字符 | No Sort |
| a | 啊 | 1 | 2001-03-13 | @ | Item 0 |
| b | 把 | 2 | 1789-07-14 | $ | Item 1 |
| c | 擦 | 3 | 1949-07-04 | % | Item 2 |
| d | 大 | 4 | 1975-08-19 | & | Item 3 |
| e | 饿 | 5 | 2001-01-01 | * | Item 4 |
| f | 发 | 6 | 2001-04-18 | ( | Item 5 |
| f | 发 | 6 | 2001-04-18 | ( | Item 5 |
| f | 发 | 6 | 2001-04-18 | ( | Item 5 |
| f | 发 | 6 | 2001-04-18 | ( | Item 5 |
| f | 发 | 6 | 2001-04-18 | ( | Item 5 |
| f | 发 | 6 | 2001-04-18 | ( | Item 5 |
| f | 发 | 6 | 2001-04-18 | ( | Item 5 |
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script type="text/javascript">
/*----------------------------------------------------------------------------\
| Sortable Table 1.04 |
|-----------------------------------------------------------------------------|
| Created by Erik Arvidsson |
| (http://webfx.eae.net/contact.html#erik) ... |
| For WebFX (http://webfx.eae.net/) &nbs ... |
|-----------------------------------------------------------------------------|
| A DOM 1 based script that allows an ordinary HTML table to be sortable. |
|-----------------------------------------------------------------------------|
| Copyright (c) 1998 - 2002 Erik Arvidsson |
|-----------------------------------------------------------------------------|
| This software is provided "as is", without warranty of any kind, express or |
| implied, including but not limited to the warranties of merchantability, |
| fitness for a particular purpose and noninfringement. In no event shall the |
| authors or copyright holders be liable for any claim, damages or other |
| liability, whether in an action of contract, tort or otherwise, arising |
| from, out of or in connection with the software or the use or other |
| dealings in the software. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| This software is available under the three different licenses mentioned |
| below. To use this software you must chose, and qualify, for one of those. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Non-Commercial License http://webfx.eae.net/license.html |
| Permits anyone the right to use the software in a non-commercial context |
| free of charge. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Commercial license http://webfx.eae.net/commercial.html |
| Permits the license holder the right to use the software in a commercial |
| context. Such license must be specifically obtained, however it's valid for |
| any number of implementations of the licensed software. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt |
| Permits anyone the right to use and modify the software without limitations |
| as long as proper credits are given and the original and modified source |
| code are included. Requires that the final product, software derivate from |
| the original source or any software utilizing a GPL component, such as |
| this, is also licensed under the GPL license. |
|-----------------------------------------------------------------------------|
| 2003-01-10 | First version |
| 2003-01-19 | Minor changes to the date parsing |
| 2003-01-28 | JScript 5.0 fixes (no support for 'in' operator) |
| 2003-02-01 | Sloppy typo like error fixed in getInnerText |
| 2003-07-04 | Added workaround for IE cellIndex bug. |
|-----------------------------------------------------------------------------|
| Created 2003-01-10 | All changes are in the log above. | Updated 2003-07-04 |
\----------------------------------------------------------------------------*/
function SortableTable(oTable, oSortTypes) {
this.element = oTable;
this.tHead = oTable.tHead;
this.tBody = oTable.tBodies[0];
this.document = oTable.ownerDocument || oTable.document;
this.sortColumn = null;
this.descending = null;
var oThis = this;
this._headerOnclick = function (e) {
oThis.headerOnclick(e);
};
// only IE needs this
var win = this.document.defaultView || this.document.parentWindow;
this._onunload = function () {
oThis.destroy();
};
if (win && typeof win.attachEvent != "undefined") {
win.attachEvent("onunload", this._onunload);
}
this.initHeader(oSortTypes || []);
}
SortableTable.gecko = navigator.product == "Gecko";
SortableTable.msie = /msie/i.test(navigator.userAgent);
// Mozilla is faster when doing the DOM manipulations on
// an orphaned element. MSIE is not
SortableTable.removeBeforeSort = SortableTable.gecko;
SortableTable.prototype.onsort = function () {};
// adds arrow containers and events
// also binds sort type to the header cells so that reordering columns does
// not break the sort types
SortableTable.prototype.initHeader = function (oSortTypes) {
var cells = this.tHead.rows[0].cells;
var l = cells.length;
var img, c;
for (var i = 0; i < l; i++) {
c = cells[i];
img = this.document.createElement("IMG");
img.src = "images/blank.png";
c.appendChild(img);
if (oSortTypes[i] != null) {
c._sortType = oSortTypes[i];
}
if (typeof c.addEventListener != "undefined")
c.addEventListener("click", this._headerOnclick, false);
else if (typeof c.attachEvent != "undefined")
c.attachEvent("onclick", this._headerOnclick);
}
this.updateHeaderArrows();
};
// remove arrows and events
SortableTable.prototype.uninitHeader = function () {
var cells = this.tHead.rows[0].cells;
var l = cells.length;
var c;
for (var i = 0; i < l; i++) {
c = cells[i];
c.removeChild(c.lastChild);
if (typeof c.removeEventListener != "undefined")
c.removeEventListener("click", this._headerOnclick, false);
else if (typeof c.detachEvent != "undefined")
c.detachEvent("onclick", this._headerOnclick);
}
};
SortableTable.prototype.updateHeaderArrows = function () {
var cells = this.tHead.rows[0].cells;
var l = cells.length;
var img;
for (var i = 0; i < l; i++) {
img = cells[i].lastChild;
if (i == this.sortColumn)
img.className = "sort-arrow " + (this.descending ? "descending" : "ascending");
else
img.className = "sort-arrow";
}
};
SortableTable.prototype.headerOnclick = function (e) {
// find TD element
var el = e.target || e.srcElement;
while (el.tagName != "TD")
el = el.parentNode;
this.sort(SortableTable.msie ? SortableTable.getCellIndex(el) : el.cellIndex);
};
// IE returns wrong cellIndex when columns are hidden
SortableTable.getCellIndex = function (oTd) {
var cells = oTd.parentNode.childNodes
var l = cells.length;
var i;
for (i = 0; cells[i] != oTd && i < l; i++)
;
return i;
};
SortableTable.prototype.getSortType = function (nColumn) {
var cell = this.tHead.rows[0].cells[nColumn];
var val = cell._sortType;
if (val != "")
return val;
return "String";
};
// only nColumn is required
// if bDescending is left out the old value is taken into account
// if sSortType is left out the sort type is found from the sortTypes array
SortableTable.prototype.sort = function (nColumn, bDescending, sSortType) {
if (sSortType == null)
sSortType = this.getSortType(nColumn);
// exit if None
if (sSortType == "None")
return;
if (bDescending == null) {
if (this.sortColumn != nColumn)
this.descending = true;
else
this.descending = !this.descending;
}
this.sortColumn = nColumn;
if (typeof this.onbeforesort == "function")
this.onbeforesort();
var f = this.getSortFunction(sSortType, nColumn);
var a = this.getCache(sSortType, nColumn);
var tBody = this.tBody;
a.sort(f);
if (this.descending)
a.reverse();
if (SortableTable.removeBeforeSort) {
// remove from doc
var nextSibling = tBody.nextSibling;
var p = tBody.parentNode;
p.removeChild(tBody);
}
// insert in the new order
var l = a.length;
for (var i = 0; i < l; i++)
tBody.appendChild(a[i].element);
if (SortableTable.removeBeforeSort) {
// insert into doc
p.insertBefore(tBody, nextSibling);
}
this.updateHeaderArrows();
this.destroyCache(a);
if (typeof this.onsort == "function")
this.onsort();
};
SortableTable.prototype.asyncSort = function (nColumn, bDescending, sSortType) {
var oThis = this;
this._asyncsort = function () {
oThis.sort(nColumn, bDescending, sSortType);
};
window.setTimeout(this._asyncsort, 1);
};
SortableTable.prototype.getCache = function (sType, nColumn) {
var rows = this.tBody.rows;
var l = rows.length;
var a = new Array(l);
var r;
for (var i = 0; i < l; i++) {
r = rows[i];
a[i] = {
value: this.getRowValue(r, sType, nColumn),
element: r
};
};
return a;
};
SortableTable.prototype.destroyCache = function (oArray) {
var l = oArray.length;
for (var i = 0; i < l; i++) {
oArray[i].value = null;
oArray[i].element = null;
oArray[i] = null;
}
}
SortableTable.prototype.getRowValue = function (oRow, sType, nColumn) {
var s;
var c = oRow.cells[nColumn];
if (typeof c.innerText != "undefined")
s = c.innerText;
else
s = SortableTable.getInnerText(c);
return this.getValueFromString(s, sType);
};
SortableTable.getInnerText = function (oNode) {
var s = "";
var cs = oNode.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
s += SortableTable.getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
s += cs[i].nodeValue;
break;
}
}
return s;
}
SortableTable.prototype.getValueFromString = function (sText, sType) {
switch (sType) {
case "Number":
return Number(sText);
case "CaseInsensitiveString":
return sText.toUpperCase();
case "Date":
var parts = sText.split("-");
var d = new Date(0);
d.setFullYear(parts[0]);
d.setDate(parts[2]);
d.setMonth(parts[1] - 1);
return d.valueOf();
}
return sText;
};
SortableTable.prototype.getSortFunction = function (sType, nColumn) {
return function compare(n1, n2) {
if (n1.value < n2.value)
return -1;
if (n2.value < n1.value)
return 1;
return 0;
};
};
SortableTable.prototype.destroy = function () {
this.uninitHeader();
var win = this.document.parentWindow;
if (win && typeof win.detachEvent != "undefined") { // only IE needs this
win.detachEvent("onunload", this._onunload);
}
this._onunload = null;
this.element = null;
this.tHead = null;
this.tBody = null;
this.document = null;
this._headerOnclick = null;
this.sortTypes = null;
this._asyncsort = null;
this.onsort = null;
};
</script>
<link type="text/css" rel="StyleSheet" href="sortabletable.css" />
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, Sans-Serif;
font: Message-Box;
}
code {
font-size: 1em;
}
.sort-table {
font: Icon;
border: 1px Solid ThreeDShadow;
background: Window;
color: WindowText;
}
.sort-table thead {
background: ButtonFace;
}
.sort-table td {
padding: 2px 5px;
}
.sort-table thead td {
border: 1px solid;
border-color: ButtonHighlight ButtonShadow
ButtonShadow ButtonHighlight;
cursor: default;
}
.sort-table thead td:active {
border-color: ButtonShadow ButtonHighlight
ButtonHighlight ButtonShadow;
padding: 3px 4px 1px 6px;
}
.sort-arrow {
width: 11px;
height: 11px;
background-position: center center;
background-repeat: no-repeat;
margin: 0 2px;
}
.sort-arrow.descending {
background-image: url("images/downsimple.png");
}
.sort-arrow.ascending {
background-image: url("images/upsimple.png");
}
</style>
</head>
<body>
<table class="sort-table" id="table-1" cellspacing="0">
<thead>
<tr>
<td>英文</td>
<td>中文</td>
<td>数字</td>
<td>日期</td>
<td>字符</td>
<td>No Sort</td>
</tr>
</thead>
<tbody>
<tr><td>a</td><td>啊</td><td>1</td><td>2001-03-13</td><td>@</td><td>Item 0</td></tr>
<tr><td>b</td><td>把</td><td>2</td><td>1789-07-14</td><td>$</td><td>Item 1</td></tr>
<tr><td>c</td><td>擦</td><td>3</td><td>1949-07-04</td><td>%</td><td>Item 2</td></tr>
<tr><td>d</td><td>大</td><td>4</td><td>1975-08-19</td><td>&</td><td>Item 3</td></tr>
<tr><td>e</td><td>饿</td><td>5</td><td>2001-01-01</td><td>*</td><td>Item 4</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
</tbody>
</table>
<script type="text/javascript">
var st1 = new SortableTable(document.getElementById("table-1"),
["英文", "中文", "Number", "数字", "字符","None"]);
</script>
</body>
</html>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script type="text/javascript">
/*----------------------------------------------------------------------------\
| Sortable Table 1.04 |
|-----------------------------------------------------------------------------|
| Created by Erik Arvidsson |
| (http://webfx.eae.net/contact.html#erik) ... |
| For WebFX (http://webfx.eae.net/) &nbs ... |
|-----------------------------------------------------------------------------|
| A DOM 1 based script that allows an ordinary HTML table to be sortable. |
|-----------------------------------------------------------------------------|
| Copyright (c) 1998 - 2002 Erik Arvidsson |
|-----------------------------------------------------------------------------|
| This software is provided "as is", without warranty of any kind, express or |
| implied, including but not limited to the warranties of merchantability, |
| fitness for a particular purpose and noninfringement. In no event shall the |
| authors or copyright holders be liable for any claim, damages or other |
| liability, whether in an action of contract, tort or otherwise, arising |
| from, out of or in connection with the software or the use or other |
| dealings in the software. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| This software is available under the three different licenses mentioned |
| below. To use this software you must chose, and qualify, for one of those. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Non-Commercial License http://webfx.eae.net/license.html |
| Permits anyone the right to use the software in a non-commercial context |
| free of charge. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Commercial license http://webfx.eae.net/commercial.html |
| Permits the license holder the right to use the software in a commercial |
| context. Such license must be specifically obtained, however it's valid for |
| any number of implementations of the licensed software. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt |
| Permits anyone the right to use and modify the software without limitations |
| as long as proper credits are given and the original and modified source |
| code are included. Requires that the final product, software derivate from |
| the original source or any software utilizing a GPL component, such as |
| this, is also licensed under the GPL license. |
|-----------------------------------------------------------------------------|
| 2003-01-10 | First version |
| 2003-01-19 | Minor changes to the date parsing |
| 2003-01-28 | JScript 5.0 fixes (no support for 'in' operator) |
| 2003-02-01 | Sloppy typo like error fixed in getInnerText |
| 2003-07-04 | Added workaround for IE cellIndex bug. |
|-----------------------------------------------------------------------------|
| Created 2003-01-10 | All changes are in the log above. | Updated 2003-07-04 |
\----------------------------------------------------------------------------*/
function SortableTable(oTable, oSortTypes) {
this.element = oTable;
this.tHead = oTable.tHead;
this.tBody = oTable.tBodies[0];
this.document = oTable.ownerDocument || oTable.document;
this.sortColumn = null;
this.descending = null;
var oThis = this;
this._headerOnclick = function (e) {
oThis.headerOnclick(e);
};
// only IE needs this
var win = this.document.defaultView || this.document.parentWindow;
this._onunload = function () {
oThis.destroy();
};
if (win && typeof win.attachEvent != "undefined") {
win.attachEvent("onunload", this._onunload);
}
this.initHeader(oSortTypes || []);
}
SortableTable.gecko = navigator.product == "Gecko";
SortableTable.msie = /msie/i.test(navigator.userAgent);
// Mozilla is faster when doing the DOM manipulations on
// an orphaned element. MSIE is not
SortableTable.removeBeforeSort = SortableTable.gecko;
SortableTable.prototype.onsort = function () {};
// adds arrow containers and events
// also binds sort type to the header cells so that reordering columns does
// not break the sort types
SortableTable.prototype.initHeader = function (oSortTypes) {
var cells = this.tHead.rows[0].cells;
var l = cells.length;
var img, c;
for (var i = 0; i < l; i++) {
c = cells[i];
img = this.document.createElement("IMG");
img.src = "images/blank.png";
c.appendChild(img);
if (oSortTypes[i] != null) {
c._sortType = oSortTypes[i];
}
if (typeof c.addEventListener != "undefined")
c.addEventListener("click", this._headerOnclick, false);
else if (typeof c.attachEvent != "undefined")
c.attachEvent("onclick", this._headerOnclick);
}
this.updateHeaderArrows();
};
// remove arrows and events
SortableTable.prototype.uninitHeader = function () {
var cells = this.tHead.rows[0].cells;
var l = cells.length;
var c;
for (var i = 0; i < l; i++) {
c = cells[i];
c.removeChild(c.lastChild);
if (typeof c.removeEventListener != "undefined")
c.removeEventListener("click", this._headerOnclick, false);
else if (typeof c.detachEvent != "undefined")
c.detachEvent("onclick", this._headerOnclick);
}
};
SortableTable.prototype.updateHeaderArrows = function () {
var cells = this.tHead.rows[0].cells;
var l = cells.length;
var img;
for (var i = 0; i < l; i++) {
img = cells[i].lastChild;
if (i == this.sortColumn)
img.className = "sort-arrow " + (this.descending ? "descending" : "ascending");
else
img.className = "sort-arrow";
}
};
SortableTable.prototype.headerOnclick = function (e) {
// find TD element
var el = e.target || e.srcElement;
while (el.tagName != "TD")
el = el.parentNode;
this.sort(SortableTable.msie ? SortableTable.getCellIndex(el) : el.cellIndex);
};
// IE returns wrong cellIndex when columns are hidden
SortableTable.getCellIndex = function (oTd) {
var cells = oTd.parentNode.childNodes
var l = cells.length;
var i;
for (i = 0; cells[i] != oTd && i < l; i++)
;
return i;
};
SortableTable.prototype.getSortType = function (nColumn) {
var cell = this.tHead.rows[0].cells[nColumn];
var val = cell._sortType;
if (val != "")
return val;
return "String";
};
// only nColumn is required
// if bDescending is left out the old value is taken into account
// if sSortType is left out the sort type is found from the sortTypes array
SortableTable.prototype.sort = function (nColumn, bDescending, sSortType) {
if (sSortType == null)
sSortType = this.getSortType(nColumn);
// exit if None
if (sSortType == "None")
return;
if (bDescending == null) {
if (this.sortColumn != nColumn)
this.descending = true;
else
this.descending = !this.descending;
}
this.sortColumn = nColumn;
if (typeof this.onbeforesort == "function")
this.onbeforesort();
var f = this.getSortFunction(sSortType, nColumn);
var a = this.getCache(sSortType, nColumn);
var tBody = this.tBody;
a.sort(f);
if (this.descending)
a.reverse();
if (SortableTable.removeBeforeSort) {
// remove from doc
var nextSibling = tBody.nextSibling;
var p = tBody.parentNode;
p.removeChild(tBody);
}
// insert in the new order
var l = a.length;
for (var i = 0; i < l; i++)
tBody.appendChild(a[i].element);
if (SortableTable.removeBeforeSort) {
// insert into doc
p.insertBefore(tBody, nextSibling);
}
this.updateHeaderArrows();
this.destroyCache(a);
if (typeof this.onsort == "function")
this.onsort();
};
SortableTable.prototype.asyncSort = function (nColumn, bDescending, sSortType) {
var oThis = this;
this._asyncsort = function () {
oThis.sort(nColumn, bDescending, sSortType);
};
window.setTimeout(this._asyncsort, 1);
};
SortableTable.prototype.getCache = function (sType, nColumn) {
var rows = this.tBody.rows;
var l = rows.length;
var a = new Array(l);
var r;
for (var i = 0; i < l; i++) {
r = rows[i];
a[i] = {
value: this.getRowValue(r, sType, nColumn),
element: r
};
};
return a;
};
SortableTable.prototype.destroyCache = function (oArray) {
var l = oArray.length;
for (var i = 0; i < l; i++) {
oArray[i].value = null;
oArray[i].element = null;
oArray[i] = null;
}
}
SortableTable.prototype.getRowValue = function (oRow, sType, nColumn) {
var s;
var c = oRow.cells[nColumn];
if (typeof c.innerText != "undefined")
s = c.innerText;
else
s = SortableTable.getInnerText(c);
return this.getValueFromString(s, sType);
};
SortableTable.getInnerText = function (oNode) {
var s = "";
var cs = oNode.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
s += SortableTable.getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
s += cs[i].nodeValue;
break;
}
}
return s;
}
SortableTable.prototype.getValueFromString = function (sText, sType) {
switch (sType) {
case "Number":
return Number(sText);
case "CaseInsensitiveString":
return sText.toUpperCase();
case "Date":
var parts = sText.split("-");
var d = new Date(0);
d.setFullYear(parts[0]);
d.setDate(parts[2]);
d.setMonth(parts[1] - 1);
return d.valueOf();
}
return sText;
};
SortableTable.prototype.getSortFunction = function (sType, nColumn) {
return function compare(n1, n2) {
if (n1.value < n2.value)
return -1;
if (n2.value < n1.value)
return 1;
return 0;
};
};
SortableTable.prototype.destroy = function () {
this.uninitHeader();
var win = this.document.parentWindow;
if (win && typeof win.detachEvent != "undefined") { // only IE needs this
win.detachEvent("onunload", this._onunload);
}
this._onunload = null;
this.element = null;
this.tHead = null;
this.tBody = null;
this.document = null;
this._headerOnclick = null;
this.sortTypes = null;
this._asyncsort = null;
this.onsort = null;
};
</script>
<link type="text/css" rel="StyleSheet" href="sortabletable.css" />
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, Sans-Serif;
font: Message-Box;
}
code {
font-size: 1em;
}
.sort-table {
font: Icon;
border: 1px Solid ThreeDShadow;
background: Window;
color: WindowText;
}
.sort-table thead {
background: ButtonFace;
}
.sort-table td {
padding: 2px 5px;
}
.sort-table thead td {
border: 1px solid;
border-color: ButtonHighlight ButtonShadow
ButtonShadow ButtonHighlight;
cursor: default;
}
.sort-table thead td:active {
border-color: ButtonShadow ButtonHighlight
ButtonHighlight ButtonShadow;
padding: 3px 4px 1px 6px;
}
.sort-arrow {
width: 11px;
height: 11px;
background-position: center center;
background-repeat: no-repeat;
margin: 0 2px;
}
.sort-arrow.descending {
background-image: url("images/downsimple.png");
}
.sort-arrow.ascending {
background-image: url("images/upsimple.png");
}
</style>
</head>
<body>
<table class="sort-table" id="table-1" cellspacing="0">
<thead>
<tr>
<td>英文</td>
<td>中文</td>
<td>数字</td>
<td>日期</td>
<td>字符</td>
<td>No Sort</td>
</tr>
</thead>
<tbody>
<tr><td>a</td><td>啊</td><td>1</td><td>2001-03-13</td><td>@</td><td>Item 0</td></tr>
<tr><td>b</td><td>把</td><td>2</td><td>1789-07-14</td><td>$</td><td>Item 1</td></tr>
<tr><td>c</td><td>擦</td><td>3</td><td>1949-07-04</td><td>%</td><td>Item 2</td></tr>
<tr><td>d</td><td>大</td><td>4</td><td>1975-08-19</td><td>&</td><td>Item 3</td></tr>
<tr><td>e</td><td>饿</td><td>5</td><td>2001-01-01</td><td>*</td><td>Item 4</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
<tr><td>f</td><td>发</td><td>6</td><td>2001-04-18</td><td>(</td><td>Item 5</td></tr>
</tbody>
</table>
<script type="text/javascript">
var st1 = new SortableTable(document.getElementById("table-1"),
["英文", "中文", "Number", "数字", "字符","None"]);
</script>
</body>
</html>
