简单的table列头排序

最新推荐文章于 2023-10-31 14:35:26 发布

yiyioo

最新推荐文章于 2023-10-31 14:35:26 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： table firefox function xhtml html border

本文链接：https://blog.csdn.net/yiyioo/article/details/657705

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以前看到obj.swapNode(obj1)这个函数的时候,
心就痒痒的,觉得用这个来做table的列头排序蛮好,
跟冒泡排序法类似,今天工作效率又不高,所以就写了下面这个列头排序.
因为写得很随意,所以有点乱,参数也很乱,哈哈,改天有兴致再整理,完善.

<!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>
<style>
    td{font-size:12px; text-align:center;}
</style>
<script>
var x=0;    //要排序的列的序号,从0开始

//**************************************************
//功能:交换结点,也就是行
//参数:v1--当前行的值   属于要排序的列
//    v2--下一行的值   属于要排序的列
//    obj1--当前行
//    obj2--下一行
//    大于还是小于,也就是升序还是
function SwapNode(v1,v2,obj1,obj2,flag)
{
if(eval(v1.charCodeAt(0)+flag+v2.charCodeAt(0)))
{
     var bool = obj1.swapNode(obj2);
     compositor_F(flag);
}
}

//**************************************************
//功能:根据状态选择升序或者降序
//参数:要排序的列
function compositor(obj)
{
    if(obj.innerText.indexOf("↓")!=-1)
{
     obj.innerText = obj.innerText.substring(0,obj.innerText.length-1);   //去掉原来的升/降序标记
     obj.innerText+="↑";  //增加现在在排序状态
     compositor_F(">");   //进行排序,升序
}
else
{
     if(obj.innerText.indexOf("↑")!=-1)
      obj.innerText = obj.innerText.substring(0,obj.innerText.length-1);
      obj.innerText+="↓";
     compositor_F("<");
}
}

//****************************************************
//功能: 进行排序
//参数:升/降序状态
function compositor_F(flag)
{
var oTb = document.all.tb;
var len = oTb.childNodes[0].childNodes.length;
var oTr;
var oTr1;
for(i=1;i<len;i++)
{
  oTr = oTb.childNodes[0].childNodes[i];
  if(typeof(oTb.childNodes[0].childNodes[i+1])=="object") //如果有下一行
  {
   oTr1 = oTb.childNodes[0].childNodes[i+1];
   SwapNode(oTr.childNodes[x].innerText,oTr1.childNodes[x].innerText,oTr,oTr1,flag);   //对两行进行比较
  }

}
}

</script>

</head>

据说现在写的程序都要跨平台，
两天后，
俺拿到firefox浏览器下试了一下，
咦？
怎么没效果，查了一下，发现firefox不支持innerText,
于是改成innerHTML,发现可以出现箭头了，但发现不会排序，
估计swapNode也不被firefox支持，查了一下手册，果然，没有标准支持。
看来，得重新写一个交换tr的函数了，5555555555
这样就得和swapNode这个函数88了，唉~~
现在没时间，有空再写~~