码迷,mamicode.com
首页 > 编程语言 > 详细

表格排序

时间:2017-04-15 00:22:14      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:status   package   str   title   apply   java   length   element   []   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
      <div>
          <table id="tab">
              <thead>
                 <tr>
                     <th class="cursor">名字</th>
                     <th class="cursor">年龄</th>
                     <th class="cursor">武力</th>
                 </tr>
              </thead>
              <tbody >
              </tbody>
          </table>
      </div>
      <script type="text/javascript">
           var oTab = document.getElementById("tab");
           var tBody = oTab.tBodies[0];
           var xmlHttp = new XMLHttpRequest();
           var data = null;
           xmlHttp.open(‘GET‘,‘./package.json‘,false);
          xmlHttp.onreadystatechange=function()
          {
              // /^2\d{2}$/.test(xhr.status)
              if (xmlHttp.readyState==4 && xmlHttp.status==200)
              {
                var jsonString =  xmlHttp.responseText;
                 // console.log(jsonString);
                  data=JSON.parse(jsonString);
              }
          };
          xmlHttp.send(null);
           var farg = document.createDocumentFragment();
            function rendData(){
                for(var i = 0; i<data.length;i++){
                   var cur = data[i];
                    var tr  = document.createElement("tr");
                    for(var key in cur){
                       // console.log("key  "+key,data[i][key]);
                        var td = document.createElement("td");
                        //td.setAttribute("value",data[i][key]);
                        td.innerHTML =data[i][key];
                        tr.appendChild(td);
                    }
                    farg.appendChild(tr);
                }
                tBody.appendChild(farg);
            }
          rendData();
        var oRows = tBody.rows;
        Array.apply(null,oRows);
         function sort(n){
             var that = this;
             this.flag*=-1;
             var newArray = [].slice.call(oRows);
             newArray.sort(function(a,b){
                 var itemA = a.cells[n].innerHTML;
                 var itemB = b.cells[n].innerHTML;
                 if(isNaN(itemA)||isNaN(itemB)){
                     return itemA.localeCompare(itemB)*(that.flag);
                 }else{
                     return (parseFloat(itemA)-parseFloat(itemB))*(that.flag);
                 }
                return ;
             });
             var frag = document.createDocumentFragment();
             for(var x =0;x<newArray.length;x++){
                 frag.appendChild(newArray[x]);
             }
             tBody.appendChild(frag);
             console.log(newArray);
         }
           var curs  = document.getElementsByClassName("cursor");
           for(var v = 0;v <curs.length;v++){
               curs[v].flag = -1;
               curs[v].index = v;
               curs[v].onclick =function (){
                   var that = this;
                sort.call(that,that.index)
              }
           }


      </script>
</body>
</html>

  

表格排序

标签:status   package   str   title   apply   java   length   element   []   

原文地址:http://www.cnblogs.com/zzzzzzzsy/p/6711276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!