表单排序（面向过程）

作者: 王远清orz | 来源:发表于2020-01-02 15:27 被阅读0次

表单排序（面向过程）
表单排序（面向过程）
有关iOS基础知识总结
2、面向对象
【面向对象一】从面向过程到面向对象写函数方法的进化
JavaScript高级
Python中的面向对象以及类
面向对象的三大基本特征和五大设计原则
Java基础
理论三：面向对象相比面向过程有哪些优势？面向过程真的过时了吗？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  table {
    width: 300px;
    margin: 100px auto;
    border-collapse: collapse;
  }

  table,
  th,
  td {
    border: 1px solid #ddd;
    text-align: center;
    line-height: 36px;
  }
</style>

<body>
  <table id="container">
  </table>
  <script>

    var data = [
      { name: '赵六', age: '18', num: 1, score: 95 },
      { name: '张三', age: '22', num: 2, score: 92 },
      { name: '李四', age: '24', num: 5, score: 100 },
      { name: '王五', age: '29', num: 7, score: 68 },
      { name: '钱八', age: '25', num: 3, score: 72 },
    ];

    // 创建构造函数
    function TableSort(id, data) {
      this.container = document.getElementById(id);
      this.data = data;
    }
    // 初始化
    TableSort.prototype.init = function () {
      var thead = this.initThead();
      var tbody = this.initTbody(data);
      this.container.appendChild(thead);
      this.container.appendChild(tbody);
      this.addEvent();
    }
    // 表头
    TableSort.prototype.initThead = function () {
      var thead = document.createElement('thead');
      var tag = '<tr>'
        + '<th type="name">姓名</th>'
        + '<th type="age">年龄</th>'
        + '<th type="num">学号</th>'
        + '<th type="score">分数</th>'
        + '</tr>';
      thead.innerHTML = tag;
      return thead;
    }
    // 表单
    TableSort.prototype.initTbody = function (data) {
      var tbody = document.createElement('tbody');
      var tag = '';
      for (var i = 0; i < data.length; i++) {
        tag += '<tr>'
          + '<td>' + data[i].name + '</td>'
          + '<td>' + data[i].age + '</td>'
          + '<td>' + data[i].num + '</td>'
          + '<td>' + data[i].score + '</td>'
          + '</tr>';
      }
      tbody.innerHTML = tag;
      return tbody;
    }
    // 添加点击事件
    TableSort.prototype.addEvent = function () {
      var ths = document.getElementsByTagName('th');
      var that = this;
      for (var i = 0; i < ths.length; i++) {
        ths[i].onclick = function () {
          var sortname = this.getAttribute('type');
          this.flag = this.flag == 1 ? -1 : 1;
          // 给data排序
          data.sort(function (o1, o2) {
            var n1 = o1[sortname];
            var n2 = o2[sortname];
            if (n1 > n2) {
              return this.flag;
            } else if (n1 < n2) {
              return -this.flag;
            } else {
              return 0;
            }
          }.bind(this))

          var newTbody = that.initTbody(data);
          var oldTbody = document.getElementsByTagName('tbody')[0];
          // replaceChild 替换子节点  第一个参数是新的子节点，第二个参数是旧的子节点
          that.container.replaceChild(newTbody, oldTbody);
        };
      }
    }

    var ts = new TableSort('container', data);
    ts.init();
  </script>
</body>

</html>