Chinaunix

标题: 这段表格排序代码居然在IE下报错，在Firefox下没问题 [打印本页]

作者: nothing9 时间: 2009-11-04 11:20
标题: 这段表格排序代码居然在IE下报错，在Firefox下没问题

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, "TD");
 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);
}

作者: nothing9 时间: 2009-11-04 11:22

<script language="javascript" src="sort.js"></script>

<div class="mainbox">
<table onclick="sortColumn(event)" align="center" bgcolor="#03c" border="0" cellpadding="0" cellspacing="1" width="728">
<thead>
  <tr bgcolor="#ffffff">
<td align="center" height="18"><a href="#" title="按车次排序">车次</td>
<td align="center" height="18"><a href="#" title="按车次排序">类型</td>
<td align="center" height="18"><a href="#" title="按始发站排序">始发站</td>
<td align="center" height="18"><a href="#" title="按始发时间排序">始发时间</td>
<td align="center" height="18"><a href="#" title="按到站时间排序">到站时间</td>
<td align="center" height="18"><a href="#" title="按查询站排序">查询站</td>
<td align="center" height="18"><a href="#" title="按开车时间排序">开车时间</td>
<td align="center" height="18"><a href="#" title="按终点站排序">终点站</td>
<td align="center" height="18"><a href="#" title="按终到时间排序">终到时间</td>
  </tr>
</thead>

<tbody>
  <tr onmouseover="this.bgColor='#eeeeee';" onmouseout="this.bgColor='#ffffff';" bgcolor="#ffffff">
<td align="center" height="18">K445/K448</td>
<td align="center" height="18">空调快速</td>
<td align="center" height="18">西安</td>
<td align="center" height="18">22:48</td>
<td align="center" height="18">12:40</td>
<td align="center" height="18">麻城</td>
<td align="center" height="18">12:42</td>
<td align="center" height="18">深圳</td>
<td align="center" height="18">04:50</td>
  </tr>

  <tr onmouseover="this.bgColor='#eeeeee';" onmouseout="this.bgColor='#ffffff';" bgcolor="#ffffff">
<td align="center" height="18">K105</td>
<td align="center" height="18">空调快速</td>
<td align="center" height="18">北京西</td>
<td align="center" height="18">23:50</td>
<td align="center" height="18">11:58</td>
<td align="center" height="18">麻城</td>
<td align="center" height="18">12:00</td>
<td align="center" height="18">深圳</td>
<td align="center" height="18">05:02</td>
  </tr>

  <tr onmouseover="this.bgColor='#eeeeee';" onmouseout="this.bgColor='#ffffff';" bgcolor="#ffffff">
<td align="center" height="18">1335/1338</td>
<td align="center" height="18">普快</td>
<td align="center" height="18">南宁</td>
<td align="center" height="18">23:50</td>
<td align="center" height="18">07:21</td>
<td align="center" height="18">麻城</td>
<td align="center" height="18">07:35</td>
<td align="center" height="18">青岛</td>
<td align="center" height="18">05:00</td>
  </tr>
</tbody>
</table>
</div>

作者: zhoumiao 时间: 2009-11-04 11:32
报的什么错？可以下一个MS的javascript调试工具跟进去看的

作者: nothing9 时间: 2009-11-04 11:32
还有个问题，这段代码不能对中文字符串进行排序，哪位老师能帮忙修改一下？谢了先！

附件是代码源文件。

3.3 KB, 下载次数: 36

作者: nothing9 时间: 2009-11-04 11:34
网页错误详细信息

用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
时间戳: Wed, 4 Nov 2009 03:33:17 UTC

消息: 无效字符
行: 1
字符: 1
代码: 0
URI: file:///E:/sort/sort.js

欢迎光临 Chinaunix (http://bbs.chinaunix.net/)

Powered by Discuz! X3.2