阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 表格排序的写法和排序

      html

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>表格排序 - Powered By Broszhu</title>
          <link rel="stylesheet" type="text/css" href="css/table.css"/>
          <style>
              #home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
              #home_bottom {color:#008CD7;text-align:center;font-size:14px;}
          </style>
      </head>
      <body>
      <h2 id="home_top">表格排序 - Powered By <a href="https://github.com/Broszhu"target="_blank">broszhu</a>  博客网址:<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
      
      <p id="home_bottom">学习JavaScript是一件很有趣的事,可以做出很多自豪的小玩意!--broszhu (这个页面是实现原理:<a href="http://taobao.fm/archives/967" target="_blank">点此查看</a>)</p>
      <div id="div1">
          <table id="tab" cellpadding="0"     cellspacing="0" >
              <thead>
                  <tr>
                      <th class="w30">
                          <input type="checkbox"/>
                      </th>
                      <th class="w70" id="name">姓名</th>
                      <th class="w100 cursor" id="age">年龄</th>
                      <th class="w100" id="mail">邮箱</th>
                      <th class="w200" id="phone">手机</th>
                      <th class="w200 cursor" id="score">工资</th>
                  </tr>
              </thead>
              <tbody>
              </tbody>
          </table>
      </div>
      <script type="text/javascript" src="js/jsonPerson.js"></script>
      <!--json这个数据一定要在table.js前面,否则可能会出现报错undefined的情况-->
      <script type="text/javascript" src="js/tools.js"></script>
      <script type="text/javascript" src="js/table.js"></script>
      </body>
      </html>
      

      tools.js

      var tools = {
          formatJSON: function (jsonStr) {
              var jsonObj = null;
              try {
                  jsonObj = JSON.parse(jsonStr);
              } catch (e) {
                  jsonObj = eval("(" + jsonStr + ")");
              }
              return jsonObj;
          },
          isType: function (val, type) {
              return Object.prototype.toString.call(val) === "[object " + type + "]";
          },
          likeToArray: function (likeAry) {
              var ary = [];
              try {
                  ary = [].slice.call(likeAry, 0);
              } catch (e) {
                  for (var i = 0; i < likeAry.length; i++) {
                      ary.push(likeAry[i]);
                  }
              }
              return ary;
          }
      };
      

      table.js

      var oTab=document.getElementById("tab");
      var oBody=oTab.tBodies[0];
      var oRows=oBody.rows;
      
      var tables={
          /*下面是一个封装函数,使表格变色的*/
          changeColor:function () {
              for (var i = 0; i < oRows.length; i++) {
                  var oRow = oRows[i];
                  i % 2 == 0 ? oRow.className = "c" : oRow.className="";
      
                  oRow.oldClass = oRow.className;
                  oRow.onmouseover = function () {
                      this.className = "cy";
                  };
                  oRow.onmouseout = function () {
                      this.className = this.oldClass;
                  }
              }
          },
          /*下面是表格引入json的*/
          show:function () {
              var str = "";
              if (jsonData && jsonData.length > 0) {
                  for (var i = 0; i < jsonData.length; i++) {
                      var cur = jsonData[i];
                      str += "<tr>";
                      str += "<td><input type='checkbox' name='tabInput'/></td>";
                      for (var key in cur) {
                          str += "<td>" + cur[key] + "</td>";
                      }
                      str += "</tr>";
                  }
              }
              oBody.innerHTML = str;
              tables.changeColor();
          },
      
      };
      tables.show();
      tables.changeColor();
      
      /*表格排序*/
      function sortRows(n) {
          var oRows = oBody.rows;
          var oRowsAry = tools.likeToArray(oRows);
          //给所有行对应的数组进行排序
          oRowsAry.sort(function (a, b) {
              var as = a.cells[n].innerHTML;
              var bs = b.cells[n].innerHTML;
              if(isNaN(as)){
                  return as.localeCompare(bs);
              }else{
                  return as - bs;
              }
          });
          //实现升降序处理
          if (this.flag === "asc") {
              oRowsAry.reverse();
              this.flag = "desc";
          } else {
              this.flag = "asc";
          }
          //按照最新的顺序,把我们的每一行重新的添加到页面中
          var frg = document.createDocumentFragment();
          for (var i = 0; i < oRowsAry.length; i++) {
              frg.appendChild(oRowsAry[i]);
          }
          oBody.appendChild(frg);
          tables.changeColor();
      }
      
      /*oName.onclick = function () {
       sortRows.call(this, 1);
       *//*    alert("这是一个彩蛋!你真幸运!发触发了这个秘密!可凭此页面截图,到附近黄金店免费领取300克的项链一条!领取方式:拿起就跑,越快越好。 领取后还可以赢得看守所七天食宿全包超值游, 还送精美炫酷手铐脚链一条,时尚囚衣套装,警车接送等, 领的越多惊喜越多, 前十名还可享受免费剃头, 前一百名还可与警犬嬉戏, 来宾均赠棍棒按摩,电击去死皮美容保健套装, 还等什么,赶快行动吧 !");*//*
       };
       //tools.css-js.com 在线压缩代码;
       //开始打算给每个innerHTML加onclick事件的,但是发现用循环来做,会更加的简单;下面是废弃代码
       var oScore = document.getElementById("score");
       var oAge = document.getElementById("age");
       var oName=document.getElementById("name");
       var oPhone=document.getElementById("phone");
       var oMail=document.getElementById("mail");
       */
      var oThs=document.getElementsByTagName("th");
      for(var i=0;i<oThs.length;i++){
          oThs[i].zhu = i;
          oThs[i].onclick=function(){
              sortRows.call(this,this.zhu);
          }
      }
      
      //选中效果;
      var oChk = document.getElementsByTagName("input")[0];
      selectAll(0);
      oChk.onclick = function () {
          this.checked ? selectAll(1) : selectAll(0);
      };
      function selectAll(flag) {
          var oChk = document.getElementsByTagName("input");
          for (var i = 1; i < oChk.length; i++) {
              oChk[i].onclick = function () {
                  !this.checked ? oChk[0].checked = "" : void 0;
                  var tmpFlag = true;
                  for(var i=1; i<oChk.length; i++){
                      if(!oChk[i].checked){
                          tmpFlag = false;
                          break;
                      }
                  }
                  if(tmpFlag){
                      oChk[0].checked = "checked";
                  }
              };
              flag === 0 ? oChk[i].checked = "" : oChk[i].checked = "checked";
          }
      }
      

      jsonPerson

      var jsonData = [
          {
              name: "朱安邦",
              age: 25,
              email: "1234567890@qq.com",
              phone: "13245637823",
              score: 1340
          },
          {
              name: "刘安邦",
              age: 23,
              email: "4123456780@qq.com",
              phone: "18723456423",
              score: 1200
          },
          {
              name: "李安邦",
              age: 32,
              email: "4123456890@qq.com",
              phone: "13800026574",
              score: 1800
          },
          {
              name: "王安邦",
              age: 41,
              email: "5234567890@qq.com",
              phone: "13800993302",
              score: 1034
          },
          {
              name: "甄安邦",
              age: 40,
              email: "2234567890@qq.com",
              phone: "15802193302",
              score: 1456
          },
          {
              name: "爱安邦",
              age: 34,
              email: "2234567890@qq.com",
              phone: "13411293302",
              score: 2568
          },
          {
              name: "殷安邦",
              age: 23,
              email: "1323467890@qq.com",
              phone: "17723493302",
              score: 1445
          },
          {
              name: "康安邦",
              age: 34,
              email: "4723467890@qq.com",
              phone: "13833493302",
              score: 1740
          },
          {
              name: "邓安邦",
              age: 43,
              email: "9123456890@qq.com",
              phone: "15922493302",
              score: 1890
          },
          {
              name: "朱一名",
              age: 25,
              email: "9123456890@qq.com",
              phone: "13846379824",
              score: 1190
          },
          {
              name: "朱二名",
              age: 28,
              email: "9123456890@qq.com",
              phone: "15934493302",
              score: 1290
          },
          {
              name: "朱三名",
              age: 28,
              email: "9123456890@qq.com",
              phone: "15956783302",
              score: 1490
          },
          {
              name: "朱四名",
              age: 38,
              email: "9123456890@qq.com",
              phone: "15922496538",
              score: 1990
          },
          {
              name: "朱五名",
              age: 48,
              email: "9123456890@qq.com",
              phone: "15922497890",
              score: 1290
          },
          {
              name: "朱六名",
              age: 37,
              email: "9123456890@qq.com",
              phone: "15922434562",
              score: 2890
          },
          {
              name: "朱七名",
              age: 25,
              email: "9123456890@qq.com",
              phone: "15922474529",
              score: 3790
          },
          {
              name: "朱八名",
              age: 26,
              email: "9123456890@qq.com",
              phone: "15922499457",
              score: 2390
          },
          {
              name: "朱九名",
              age: 34,
              email: "9123456890@qq.com",
              phone: "15922492536",
              score: 1290
          },
          {
              name: "朱十名",
              age: 23,
              email: "9123456890@qq.com",
              phone: "15922492648",
              score: 2890
          },
      ];
      

      table.css

      html, body, div, input, table, tr, td, th{
          margin:0;
          padding: 0;
          font-size: 12px;
          font-family:  "微软雅黑", "宋体";
      }
      ul,li,td,th{
          list-style: none;}
      #div1{
          width: 700px;
          margin: 50px auto 0;
          padding: 5px;
          border: 1px solid #008CD7;
          border-radius: 5px;
      }
      thead tr,tbody tr{
          height: 30px;
          line-height: 30px;
          text-align: center;
          -webkit-user-select: none;
      }
      thead{
          height: 30px;
          background: #008CD7;
          cursor: pointer;
      }
      .w30 {   width: 30px;}
      .w70{width: 70px;}
      .w100{  width: 100px;}
      .w200{  width: 200px;}
      .c{background: #cccccc}
      .cy{background: #CDE074}
      
      目录
      目录