表单排序（面向过程）

作者: 王远清orz | 来源:发表于2020-01-02 15:25 被阅读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 },

    ];
    var container = document.getElementById('container');
    // 初始化表头
    function initThead() {
      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;
    }
    // 初始化表单
    function initTbody(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;
    }
    // 初始化
    var thead = initThead();
    var tbody = initTbody(data);
    container.appendChild(thead);
    container.appendChild(tbody);

    var ths = document.getElementsByTagName('th');
    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 = initTbody(data);
        var oldTbody = document.getElementsByTagName('tbody')[0];
        // replaceChild 替换子节点  第一个参数是新的子节点，第二个参数是旧的子节点
        container.replaceChild(newTbody, oldTbody);
      }
    }


  </script>
</body>

</html>