table排序

转载 2006年06月05日 10:57:00

<script>if( self == top ){top.location = "/myjs/?u=/hw/asp/jsview.asp?id=271";}</script>
<html>
<head>
<title>Table Sorting (3/4) (WebFX)-www.51windows.Net</title>
<STYLE TYPE="text/css">
tr   {background: window;}
td    {color: windowtext; font: menu; padding: 1px; padding-left: 5px; padding-right: 5px;}

table  {border-top: 1px solid buttonshadow;
    border-left: 1px solid buttonshadow;
    border-right: 1px solid buttonhighlight;
    border-bottom: 1px solid buttonhighlight;
    margin: 20px;}
thead td {background: buttonface; font: menu; border: 1px outset white;
    cursor: default; padding-top: 0; padding: bottom: 0;
    border-top: 1px solid buttonhighlight;
    border-left: 1px solid buttonhighlight;
    border-right: 1px solid buttonshadow;
    border-bottom: 1px solid buttonshadow;
    height: 16px;
    }
thead .arrow  {font-family: webdings; color: black; padding: 0; font-size: 10px;
   height: 11px; width: 10px; overflow: hidden;
   margin-bottom: 2; margin-top: -3; padding: 0; padding-top: 0; padding-bottom: 2;}
   /*nice vertical positioning :-) */
</STYLE>
</head>
<body>

<SCRIPT LANGUAGE="JavaScript">
<!--
/*----------------------------------------------------------------------------/
|                                Table Sort                                   |
|-----------------------------------------------------------------------------|
|                         Created by Erik Arvidsson                           |
|                  (http://webfx.eae.net/contact.html#erik)                   |
|                      For WebFX (http://webfx.eae.net/)                      |
|-----------------------------------------------------------------------------|
| A DOM 1 based script that allows an ordinary HTML table to be sortable.     |
|-----------------------------------------------------------------------------|
|                  Copyright (c) 1998 - 2002 Erik Arvidsson                   |
|-----------------------------------------------------------------------------|
| 1998-??-?? | First version                                                  |
|-----------------------------------------------------------------------------|
| Created 1998-??-?? | All changes are in the log above. | Updated 2001-??-?? |
/----------------------------------------------------------------------------*/

var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;

if (ie5 || dom)
 initSortTable();

function initSortTable() {
 arrowUp = document.createElement("SPAN");
 var tn = document.createTextNode("5");
 arrowUp.appendChild(tn);
 arrowUp.className = "arrow";

 arrowDown = document.createElement("SPAN");
 var tn = document.createTextNode("6");
 arrowDown.appendChild(tn);
 arrowDown.className = "arrow";
}

 

function sortTable(tableNode, nCol, bDesc, sType) {
 var tBody = tableNode.tBodies[0];
 var trs = tBody.rows;
 var trl= trs.length;
 var a = new Array();
 
 for (var i = 0; i < trl; i++) {
  a[i] = trs[i];
 }
 
 var start = new Date;
 window.status = "Sorting data...";
 a.sort(compareByColumn(nCol,bDesc,sType));
 window.status = "Sorting data done";
 
 for (var i = 0; i < trl; i++) {
  tBody.appendChild(a[i]);
  window.status = "Updating row " + (i + 1) + " of " + trl +
      " (Time spent: " + (new Date - start) + "ms)";
 }
 
 // check for onsort
 if (typeof tableNode.onsort == "string")
  tableNode.onsort = new Function("", tableNode.onsort);
 if (typeof tableNode.onsort == "function")
  tableNode.onsort();
}

function CaseInsensitiveString(s) {
 return String(s).toUpperCase();
}

function parseDate(s) {
 return Date.parse(s.replace(//-/g, '/'));
}

/* alternative to number function
 * This one is slower but can handle non numerical characters in
 * the string allow strings like the follow (as well as a lot more)
 * to be used:
 *    "1,000,000"
 *    "1 000 000"
 *    "100cm"
 */

function toNumber(s) {
    return Number(s.replace(/[^0-9/.]/g, ""));
}

function compareByColumn(nCol, bDescending, sType) {
 var c = nCol;
 var d = bDescending;
 
 var fTypeCast = String;
 
 if (sType == "Number")
  fTypeCast = Number;
 else if (sType == "Date")
  fTypeCast = parseDate;
 else if (sType == "CaseInsensitiveString")
  fTypeCast = CaseInsensitiveString;

 return function (n1, n2) {
  if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
   return d ? -1 : +1;
  if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
   return d ? +1 : -1;
  return 0;
 };
}

function sortColumnWithHold(e) {
 // find table element
 var el = ie5 ? e.srcElement : e.target;
 var table = getParent(el, "TABLE");
 
 // backup old cursor and onclick
 var oldCursor = table.style.cursor;
 var oldClick = table.onclick;
 
 // change cursor and onclick 
 table.style.cursor = "wait";
 table.onclick = null;
 
 // the event object is destroyed after this thread but we only need
 // the srcElement and/or the target
 var fakeEvent = {srcElement : e.srcElement, target : e.target};
 
 // call sortColumn in a new thread to allow the ui thread to be updated
 // with the cursor/onclick
 window.setTimeout(function () {
  sortColumn(fakeEvent);
  // once done resore cursor and onclick
  table.style.cursor = oldCursor;
  table.onclick = oldClick;
 }, 100);
}

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 fail
  
  sortTable(table,i,el._descending, el.getAttribute("type"));
 }
}


function getInnerText(el) {
 if (ie5) return el.innerText; //Not needed but it is faster
 
 var 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>
<h2>Sample</h2>

<p>Just click at the table headers to sort by that column</p>

<table cellspacing="0" border="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>Item 3</td>
  <td>Steven</td>
  <td>950227</td>
 </tr>
 <tr>
  <td>Item 2</td>
  <td>Emil</td>
  <td>990227</td>
 </tr>
 <tr>
  <td>Item 1</td>
  <td>Erik</td>
  <td>990228</td>
 </tr>
 <tr>
  <td>Item 4</td>
  <td>Scott</td>
  <td>960227</td>
 </tr>
 <tr>
  <td>Item 7</td>
  <td>Fabian</td>
  <td>970227</td>
 </tr>
 <tr>
  <td>Item 6</td>
  <td>Thomas</td>
  <td>900227</td>
 </tr>
 <tr>
  <td>Item 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>apple</td>
  <td>Strawberry</td>
  <td style="text-align: right;">45</td>
  <td>2001-03-13</td>
 </tr>
 <tr>
  <td>Banana</td>
  <td>orange</td>
  <td style="text-align: right;">7698</td>
  <td>1789-07-14</td>
 </tr>
 <tr>
  <td>orange</td>
  <td>Banana</td>
  <td style="text-align: right;">4546</td>
  <td>1949-07-04</td>
 </tr>
 <tr>
  <td>Strawberry</td>
  <td>apple</td>
  <td style="text-align: right;">987</td>
  <td>1975-08-19</td>
 </tr>
 <tr>
  <td>Pear</td>
  <td>blueberry</td>
  <td style="text-align: right;">98743</td>
  <td>2001-01-01</td>
 </tr>
 <tr>
  <td>blueberry</td>
  <td>Pear</td>
  <td style="text-align: right;">4</td>
  <td>2001-04-18</td>
 </tr>
</tbody>
</table>

</body>
</html>
<SCRIPT LANGUAGE="JavaScript" src="/log/sitelog2.asp"></SCRIPT>

 

相关文章推荐

jquery 鼠标拖动排序Li或Table

jquery 鼠标拖动排序Li或Table

table上下排序

JavaScript Table排序

====================================================== 注:本文源代码点此下载 =============================...

js Table排序

  • 2013-04-17 15:17
  • 200KB
  • 下载

js+dom娱乐之table排序

有道笔试题,点击表头进行对成绩升序或降序 约定下表格标签结构 table>tr>th tr>td 比较懒就不封装了 假设HTML结构如下 名字 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)