面向对象的JavaScript的表格排序问题

最新推荐文章于 2024-07-11 18:00:32 发布

技术大黍-曾老师

最新推荐文章于 2024-07-11 18:00:32 发布

阅读量880

点赞数

文章标签： javascript function button ie border google

本文链接：https://blog.csdn.net/arkliszeng/article/details/5173120

版权

JavaScript表格排序有很多种方式，不过在使用面向对象的方式进行JavaScript排序时IE会有一些问题。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示表格的排序功能</title>
</head>

<script type="text/javascript">
  var previousColumnIndex = 0;
  ArrayUtil = {
   arrayOne: [3, 32, 2, 5],
   arrayTwo: ["3","32","2","5"],
   demoNoarmal: function(){
    this.arrayOne.sort();//默认方式排序
    alert(this.arrayOne);
   },
   comparionAsc: function(one, two){ //升序
    if(one < two){
     return -1;
    }else if(one > two){
     return 1;
    }else{
     return 0;
    }
   },
   comparionDesc: function(one, two){ //降升
    if(one < two){
     return 1;
    }else if(one > two){
     return -1;
    }else{
     return 0;
    }
   },
   comparionSort: function(){
    //this.arrayOne.sort(this.comparionAsc);
    this.arrayOne.sort(this.comparionDesc);
    alert(this.arrayOne);
   },

   comparionAscForString: function(one, two){
    //return one.localeCompare(two); //升序
    return -one.localeCompare(two); //降序
   },
   comparionString: function(){
    this.arrayTwo.sort(this.comparionAscForString);
    alert(this.arrayTwo);
   },

   compareTRs: function(trOne,trTwo){
    /*var valueOne = trOne.cells[0].firstChild.nodeValue;
    var valueTwo = trTwo.cells[0].firstChild.nodeValue;
    return valueOne.localeCompare(valueTwo);*/
    var vValue1 = trOne.cells[0].firstChild.nodeValue;
                var vValue2 = trTwo.cells[0].firstChild.nodeValue;

                if (vValue1 < vValue2) {
                    return -1;
                } else if (vValue1 > vValue2) {
                    return 1;
                } else {
                    return 0;
                }
   },

   sortTable: function(){
    var table = document.getElementById("tableSort");
    var tBody = table.tBodies[0];
    var columData = tBody.rows;
    var trs = new Array;
   // alert(columData.nodeType + columData.nodeName + columData.nodeValue);
    for(var i = 0; i < columData.length; i++){
     trs[i] = columData[i]; //对IE无效
     //trs.push(columData[i]); //对IE有效,但是有问题
    }
    //对表格列内容排序
    trs.sort(this.compareTRs);
    var fragment = document.createDocumentFragment();
    for(var i = 0; i < trs.length; i++){
     //fragment.appendChild(trs[i]);
     fragment.appendChild(trs.pop());//IE可以使用，但是有问题！！
    }
    //显示排序后的表格
    table.appendChild(fragment);
   }

  };
</script>
<body>
<input type="button" value="默认排序方式" οnclick="ArrayUtil.demoNoarmal()" />
<input type="button" value="比较排序方式" οnclick="ArrayUtil.comparionSort()" />
<input type="button" value="字符串数组" οnclick="ArrayUtil.comparionString()" />
<table border="1" id="tableSort">
  <thead οnclick="ArrayUtil.sortTable()" style="cursor:pointer">
   <tr>
    <th>Last Name</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Smith</td>
   </tr>
   <tr>
    <td>Johnson</td>
   </tr>
   <tr>
    <td>Henderson</td>
   </tr>
   <tr>
    <td>Williams</td>
   </tr>
   <tr>
    <td>Gillaim</td>
   </tr>
   <tr>
    <td>Walker</td>
   </tr>
  </tbody>
</table><br/>
<input type="button" value="表格排序" οnclick="ArrayUtil.sortTable()" />
</body>
</html>

把以上代码拷贝到一个HTML文档，如果使用FixFox和Google浏览器都会正常显示，但是，如果使用IE来看，你会发现有非常奇怪的问题。本人现在还没有搞清楚为什么？对于IE，我非常郁闷！！！！

技术大黍-曾老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象的JavaScript的表格排序问题

JavaScript表格排序有很多种方式，不过在使用面向对象的方式进行JavaScript排序时IE会有一些问题。代码如下：演示表格的排序功能 var previousColumnIndex = 0; ArrayUtil = { arrayOne: [3, 32, 2, 5], arrayTwo: ["3","32","2","5"], demoNoarmal: func
复制链接

扫一扫