function sortColumn(e) {
var tmp = e.target ? e.target : e.srcElement;
var tHeadParent = getParent(tmp, "THEAD");
var el = getParent(tmp, "TD");if (tHeadParent == null)
return;if (el != null) {
var p = el.parentNode;
var i;// typecast to Boolean
el._descending = !Boolean(el._descending);if (tHeadParent.arrow != null) {
if (tHeadParent.arrow.parentNode != el) {
tHeadParent.arrow.parentNode._descending = null; //reset sort order
}
tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
}if (el._descending)
tHeadParent.arrow = arrowUp.cloneNode(true);
else
tHeadParent.arrow = arrowDown.cloneNode(true);el.appendChild(tHeadParent.arrow);
// get the index of the td
var cells = p.cells;
var l = cells.length;
for (i = 0; i < l; i++) {
if (cells[i] == el) break;
}var table = getParent(el, "TABLE");
// can't failsortTable(table,i,el._descending, el.getAttribute("type"));
}
}
function getInnerText(el) {
if (ie5) return el.innerText; //Not needed but it is fastervar str = "";var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
str += getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}}return str;
}function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}</script></head>
<body><!-- WebFX Layout Include -->
<script type="text/javascript">
</script>
<div class="webfx-main-body">
<!-- end WebFX Layout Includes --><h2>Sample</h2><p>Just click at the table headers to sort by that column</p><table cellspacing="0" onclick="sortColumn(event)">
<thead>
<tr>
<td style="width: 60px;">Item</td>
<td style="width: 60px;">Name</td>
<td style="width: 60px;">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td>2005-4568</td>
<td>Steven</td>
<td>950227</td>
</tr>
<tr>
<td>2005-41685</td>
<td>Emil</td>
<td>990227</td>
</tr>
<tr>
<td>2001-4568</td>
<td>Erik</td>
<td>990228</td>
</tr>
<tr>
<td>1978-4568</td>
<td>Scott</td>
<td>960227</td>
</tr>
<tr>
<td>Item 7</td>
<td>Fabian</td>
<td>970227</td>
</tr>
<tr>
<td>组 6</td>
<td>Thomas</td>
<td>900227</td>
</tr>
<tr>
<td>组 5</td>
<td>Mike</td>
<td>880227</td>
</tr>
<tr>
<td>Item 8</td>
<td>Adam</td>
<td>930227</td>
</tr>
<tr>
<td>Item 11</td>
<td>Bill</td>
<td>940227</td>
</tr>
<tr>
<td>Item 10</td>
<td>Marc</td>
<td>890227</td>
</tr>
<tr>
<td>Item 9</td>
<td>Linus</td>
<td>980227</td>
</tr>
<tr>
<td>Item 12</td>
<td>Ronald</td>
<td>960227</td>
</tr>
<tr>
<td>Item 15</td>
<td>Peter</td>
<td>950227</td>
</tr>
<tr>
<td>Item 14</td>
<td>Carlos</td>
<td>910227</td>
</tr>
<tr>
<td>Item 13</td>
<td>Paul</td>
<td>920227</td>
</tr>
<tr>
<td>Item 16</td>
<td>Arnold</td>
<td>960227</td>
</tr>
</tbody>
</table>
<p>Below is a table that is using a custom attribute called <code>type</code>
in each header cell to define how to sort the column.</p>
<table cellspacing="0" onclick="sortColumn(event)">
<thead>
<tr>
<td style="width: 60px;" type="String">String</td>
<td style="width: 60px;" type="CaseInsensitiveString" title="CaseInsensitiveString">String</td>
<td style="width: 60px;" type="Number">Number</td>
<td style="width: 60px;" type="Date">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td>2005-45678</td>
<td>Strawberry</td>
<td style="text-align: right;">45</td>
<td>03/13/2003</td>
</tr>
<tr>
<td>2005-4545678</td>
<td>orange</td>
<td style="text-align: right;">7698</td>
<td>07/14/1978</td>
</tr>
<tr>
<td>2001-567</td>
<td>Banana</td>
<td style="text-align: right;">4546</td>
<td>07/04/1949</td>
</tr>
<tr>
<td>2001-45678</td>
<td>apple</td>
<td style="text-align: right;">987</td>
<td>08/19/1975</td>
</tr>
<tr>
<td>1989-478</td>
<td>blueberry</td>
<td style="text-align: right;">98743</td>
<td>04/14/2001</td>
</tr>
<tr>
<td>2005-4567</td>
<td>Pear</td>
<td style="text-align: right;">4</td>
<td>04/18/2001</td>
</tr>
</tbody>
</table><h2>What do I need to use this</h2><p>You need to download <a href="tablesort.js">tablesort.js</a> file and include it by adding
the following line to your document <code>HEAD</code>:</p><pre>
<script type="text/javascript" src="<a href="tablesort.js">tablesort.js</a>"></script>
</pre><p>You also need to organise your table into a table head and a table body and add the onclick
handler to the table tag. The table should look like this:</p><pre>
<table onclick="sortColumn(event)">
<thead>
<tr>...</tr>
...
</thead>
<tbody>
<tr>...</tr>
...
</tbody>
</table>
</pre><p>You don't need to include a special CSS file but I recommend that you do it anyway because that the
arrow should use the webdings font. Download <a href="tablesort.css">tablesort.css</a> and add the
following line to the <code>HEAD</code>:</p><pre>
<link rel="STYLESHEET" type="text/css" href="<a href="tablesort.css">tablesort.css</a>">
</pre><h2>What's next</h2><p>If you want I could convert this into a behavior for IE5 when it is released and I could also modify
it so that you don't have to add the onclick handler manually. <a href="../../contact.html#erik">Mail me</a>
if there is a demand for this.</p>
<br>
<br>
<br><p><a href="tablesort.html">Defining the sort</a><br>
<a href="dom.html">Manipulating the DOM tree</a><br>
<a href="demo.html">Demo and instructions how to use it in your pages</a><br>
<a href="tablesortbehavior.html">Sorting with behaviors</a></p><p class="author">Author: Erik Arvidsson</p><!-- end webfx-main-body -->
</div></body>
</html>

解决方案 »

  1.   

    1979-888
    2005-4567
    2005-789
    22-4567
    22-567
    代码太长,时间太紧没看,针对这个排序可以先用split函数对
    "-"拆分
    然后生成一数字的二维数组
    用sort方法进行排序在通过循环合回字符串
      

  2.   

    <script language="JavaScript">
    <!--
    var arr = ["22-567","2005-789","2005-4567","22-4567","1979-888"];
    function sort(arr){
    //mao pao pai xu
    for(var i=0;i<arr.length-1;i++)
    for(var j=i+1;j<arr.length;j++)
    if(compare(arr[i],arr[j]))
    swap(arr,i,j);
    return arr;
    }
    function compare(strOne,strTwo){
    var arrOne = strOne.split("-");
    var arrTwo = strTwo.split("-");
    if(arrOne[0] - arrTwo[0] < 0 )
    return false;
    else if(arrOne[0] - arrTwo[0] == 0 && arrOne[1] - arrTwo[1] < 0 )
    return false;
    else return true;
    }
    function swap(arr,i,j){
    var tmp = arr[i];
    arr[i] = arr[j];
    arr[j] = tmp;
    }
    alert(sort(arr));
    //-->
    </script>