<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style>
/* 定义页面整体样式 */
body{
margin:0;
padding:0;
background:#f1f1f1;
font:70% Arial, Helvetica, sans-serif; 
color:#555;
line-height:150%;
text-align:left;
}
/* 定义table内的字体样式 */
table, td{
font:100% Arial, Helvetica, sans-serif; 
}
/* 定义table样式 */
table{
width:100%;
border-collapse:collapse;
margin:1em 0;
}
/* 定义th和td的对齐方式、边距等 */
th, td{
text-align:left;
padding:.5em;
border:1px solid #fff;
}
/* 定义表头所使用的背景图片 */
th{
background:#328aa4 url(tr_back.gif) repeat-x;
color:#fff;
cursor:pointer;
}
/* 定义td的背景色 */
td{
background:#e5f1f4;
}
</style>
<table id='sortTable' cellspacing="0" cellpadding="0">
<tr>
<th onclick='sort(this)'>数字</th>
<th onclick='sort(this)'>英文</th>
<th onclick='sort(this,1)'>汉字</th>
<th onclick='sort(this)'>标题</th>
</tr>
<tr>
<td>1</td>
<td>a</td>
<td>啊</td>
<td>Data1</td>
</tr>
<tr>
<td>3</td>
<td>b</td>
<td>哦</td>
<td>Data2</td>
</tr>
<tr>
<td>8</td>
<td>c</td>
<td>饿</td>
<td>Data3</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>一</td>
<td>Data4</td>
</tr>
</table>
</body>
</html>
<script>
var sortTable = document.getElementById('sortTable');
//为数组对象扩展原形方法xsort,该方法接收两个参数
// type 排序类型。值为1时是中文排序,其它数字为默认排序
// direct 排序方向。正序或者反序,默认正序。
Array.prototype.xsort = function(type,direct){
switch(type){
      case 1:this.sort(function(a,b){ return a.localeCompare(b) }); break;
      default:this.sort();
}
if(direct == undefined)direct = 1;
if(!direct)this.reverse();

}

//排序方法
function sort(obj,sType){
//获取本列原始行顺序数据
var list = [];
//获取本列排序后行顺序数据
var sortedList = [];
var tr = obj.parentNode;
while(tr.nextSibling){
tr = tr.nextSibling;
if(tr.nodeType == 1){
list.push(tr.cells[obj.cellIndex].innerHTML);
sortedList.push(tr.cells[obj.cellIndex].innerHTML);
}
}

//排序方式
if(obj.direct == undefined)
obj.direct = 1;
//改变移动方向
if(obj.direct)
obj.direct = 0;
else
obj.direct = 1;

sortedList.xsort(sType,obj.direct);
var target = [];
//获取排序后行的原坐标
for(var i=0,l=sortedList.length;i<l;i++){
for(var j=0,k=list.length;j<k;j++){
if(sortedList[i] == list[j])
target.push(j+1);
}
}
var cells = [];
//根据坐标获取该列所有td
for(var i=0,l=target.length;i<l;i++){
cells.push(document.getElementById('sortTable').rows[target[i]].cells[obj.cellIndex]);
}


//移动行
for(var i=0,l=list.length;i<l;i++){
//因为表头不能移动所以i+1
document.getElementById('sortTable').moveRow(cells[i].parentNode.rowIndex,i+1);
}
}

//增加鼠标行高亮效果
//增加列头点击效果
</script>1.if(direct == undefined)direct = 1;if(!direct)this.reverse();  if(obj.direct == undefined) obj.direct = 1;
  if(obj.direct) obj.direct = 0;
  else obj.direct = 1;
这两个地方的direct的值是肯定有联系的,我不大理解的就是,dierct的值他是如何传递的,在TH标签上面引用sort函数的时候并没有dierct这个参数啊,这两段代码的关系到底是怎么样的呢?
2.moveRow 方法,这个方法在IE下面是可以的,但是,FIREFOX OPERA CHOME下面都没有作用,moveRow方法是一个不符合WEB标准的方法吗?是不是要尽量少的去使用者个方法呢?

解决方案 »

  1.   

    1、
    dierct的值是在这里传递的
    if(obj.direct == undefined) obj.direct = 1;
    这句话意思就是说当dierct这个属性未定义时,就给obj对象添加一个direct属性并赋值为1;2、moveRow不是W3C标准函数,你可以通过其他方法来实现移行操作,如insertBefore,但注意改函数的第二个参数一定要写,如果没有的话你可以用null表示
      

  2.   

    哦,这样的话,direct的值第一次等于1,第二次等于0,第三次等于1,第四次等于0.....
    那么if(direct == undefined)direct = 1;if(!direct)this.reverse();这两句代码里后面半句是不是说!direct和direct==0是一样的呢?因为要反序排列的话必须!direct,根据程序运行的结果来判断,好像的direct==0的时候才会反序排列...可是根据我的理解!direct和direct==0是不一样的额
      

  3.   

    !direct和direct==0是不一样的,!direct只要是direct存在就返回true,而direct==0判断的只有当direct等于0才返回true
      

  4.   

    只要direct存在就返回true不是应该是if(direct)吗?