表格的隔行变色及排序

表格中，既可以隔行变色,也可以进行排序。程序如下:

 

<link href="main.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="sort1.js"></script>
<!-- script src="http://code.jquery.com/jquery-latest.js"></script -->
<script src="../jquery-1.4.2.js"></script>
<script type="text/javascript" id="js">
function separateLine()
{
 $("#tableList tr:odd").addClass('odd');
 $("#tableList tr:even").addClass("even");

 $("#tableList tr>td").mouseover(function(){
  $(this).parent().addClass("over");
 }).mouseout(function(){
  $(this).parent().removeClass("over");
 });
}
$(document).ready(function(){
 separateLine();
});

function sortColumn1(e)
{
 $("#tableList tr").removeClass();
 sortColumn(e);
 separateLine();
}

</script>

<style>
td,th{
 font-size:  12px;
 line-height: 20px;
 height:   22px;
}
th {
 color:    #FFFFF7;
 background-color: #7777AA;
}

.odd {background-color: #FFE; }
.even {background-color: #EFF; }
.over {background-color: #DDD; }
.arrow {
 color:    #0F0FF7;
 background-color: #A7A7AA;
}

</style>
jquery处理表格四个颜色的效果:<br/>
Gu Laicheng,2010.10.10<br/>
http://www.aixq.com/jqeuryui2table/<br/>
多次排序后效率不高,MEM占用增大.

<table id="tableList" border=0 bgcolor=#0033cc cellspacing=1 cellpadding=0 width=750 align=center>
<THEAD><tr οnclick="sortColumn1(event);"><th>车次</th>
<th>类型</th>
<th>始发站</th>
<th>出发站</th>
<th>开车时间</th>
<th>目的站</th>
<th>到达时间</th>
<th>用时</th>
<th>里程</th>
<th>终点站</th>
<th>硬座</th>
<th>软座</th>
<th>硬卧中</th>
<th>软卧下</th>
</tr></THEAD>
<tbody>
<tr><td>K117</td>
<td>空调快速</td>
<td>北京西</td>
<td>北京西</td>
<td>11:25</td>
<td>西安</td>
<td>次日03:01</td>
<td>15小时36分</td>
<td>1200</td>
<td>攀枝花</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
<tr><td>1363</td>
<td>空调普快</td>
<td>北京西</td>
<td>北京西</td>
<td>21:48</td>
<td>西安</td>
<td>次日12:41</td>
<td>14小时53分</td>
<td>1200</td>
<td>成都</td>
<td>115</td>
<td>-</td>
<td>216</td>
<td>347</td>
</tr>
<tr><td>19</td>
<td>空调直达</td>
<td>北京西</td>
<td>北京西</td>
<td>21:24</td>
<td>西安</td>
<td>次日08:25</td>
<td>11小时1分</td>
<td>1200</td>
<td>西安</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>417</td>
</tr>
<tr><td>T69</td>
<td>空调特快</td>
<td>北京西</td>
<td>北京西</td>
<td>18:44</td>
<td>西安</td>
<td>次日07:03</td>
<td>12小时19分</td>
<td>1200</td>
<td>乌鲁木齐</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
<tr><td>T7</td>
<td>空调特快</td>
<td>北京西</td>
<td>北京西</td>
<td>16:56</td>
<td>西安</td>
<td>次日05:09</td>
<td>12小时13分</td>
<td>1200</td>
<td>成都</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
<tr><td>T75</td>
<td>空调特快</td>
<td>北京西</td>
<td>北京西</td>
<td>18:28</td>
<td>西安</td>
<td>次日06:50</td>
<td>12小时22分</td>
<td>1200</td>
<td>兰州</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
<tr><td>T55</td>
<td>空调特快</td>
<td>北京西</td>
<td>北京西</td>
<td>17:11</td>
<td>西安</td>
<td>次日06:09</td>
<td>12小时58分</td>
<td>1200</td>
<td>宝鸡</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
<tr><td>T27</td>
<td>空调特快</td>
<td>北京西</td>
<td>北京西</td>
<td>21:30</td>
<td>西安</td>
<td>次日08:36</td>
<td>11小时6分</td>
<td>1200</td>
<td>拉萨</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
<tr><td>T43/T46</td>
<td>空调特快</td>
<td>北京西</td>
<td>北京西</td>
<td>21:36</td>
<td>西安</td>
<td>次日08:42</td>
<td>11小时6分</td>
<td>1200</td>
<td>延安</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
<tr><td>T41</td>
<td>空调特快</td>
<td>北京西</td>
<td>北京西</td>
<td>19:03</td>
<td>西安</td>
<td>次日06:44</td>
<td>11小时41分</td>
<td>1200</td>
<td>西安</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
<tr><td>T151</td>
<td>空调特快</td>
<td>北京西</td>
<td>北京西</td>
<td>14:20</td>
<td>西安</td>
<td>次日03:12</td>
<td>12小时52分</td>
<td>1200</td>
<td>西宁</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
<tr><td>T231</td>
<td>空调特快</td>
<td>北京西</td>
<td>北京西</td>
<td>17:20</td>
<td>西安</td>
<td>次日06:23</td>
<td>13小时3分</td>
<td>1200</td>
<td>西安</td>
<td>150</td>
<td>-</td>
<td>265</td>
<td>417</td>
</tr>
</tbody>
</table>

 

 

sort1.js (引用网上无名氏之程序，表示感谢。另对其稍有修改）

如下:

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("↓");
 arrowUp.appendChild(tn);
 arrowUp.className = "arrow";
 arrowDown = document.createElement("SPAN");
 var tn = document.createTextNode("↑");
 arrowDown.appendChild(tn);
 arrowDown.className = "arrow";
}

function sortTable(tableNode, nCol, bDesc, sType) {
 var tBody = tableNode.tBodies[0];
 var trs = tBody.rows;
 var a = new Array();

 for (var i=0; i<trs.length; i++) {
  a[i] = trs[i];
 }

 a.sort(compareByColumn(nCol,bDesc,sType));

 for (var i=0; i<a.length; i++) {
  tBody.appendChild(a[i]);
 }
}
function CaseInsensitiveString(s) {
 return String(s).toUpperCase();
}
function parseDate(s) {
 return Date.parse(s.replace(//-/g, '/'));
}
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 sortColumn(e) {
 var tmp, el, tHeadParent;
 if (ie5)
  tmp = e.srcElement;
 else if (dom)
  tmp = e.target;
 tHeadParent = getParent(tmp, "THEAD");
 el = getParent(tmp, "TH");
 if (tHeadParent == null)
  return;
 
 if (el != null) {
  var p = el.parentNode;
  var i;
  if (el._descending) // catch the null
   el._descending = false;
  else
   el._descending = true;
 
  if (tHeadParent.arrow != null) {
   if (tHeadParent.arrow.parentNode != el) {
    tHeadParent.arrow.parentNode._descending = null;  
   }
   tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
  }
  if (el._descending)
   tHeadParent.arrow = arrowDown.cloneNode(true);
  else
   tHeadParent.arrow = arrowUp.cloneNode(true);
  el.appendChild(tHeadParent.arrow);
  
  // get the index of the td
  for (i=0; i<p.cells.length; i++) {
   if (p.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 = "";
 
 for (var i=0; i<el.childNodes.length; i++) {
  switch (el.childNodes.item(i).nodeType) {
   case 1: //ELEMENT_NODE
    str += getInnerText(el.childNodes.item(i));
    break;
   case 3: //TEXT_NODE
    str += el.childNodes.item(i).nodeValue;
    break;
  }
 
 }
 
 return str;
}
function getParent(el, pTagName) {
 if (el == null) return null;
 else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
  return el;
 else
  return getParent(el.parentNode, pTagName);
}