首页 🚓JavaScript

<!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>
    <style>
      .main {
        width: 700px;
        margin: 0px auto;
        text-align: center;
      }
      #tb {
        width: 600px;
        margin: 30px auto;
        text-align: center;
      }
      thead {
        background-color: yellow;
      }
      h2 {
        text-align: center;
      }
      #tb td {
        width: 100px;
        height: 15px;
      }
      input {
        width: 95%;
        height: 15px;
        outline: none;
        border: none;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <h1>学员信息</h1>
      <button class="btn1">年龄逆向排序</button>
      <button class="btn2">薪资逆向排序</button>
    </div>
    <table border="1" cellpadding="0" cellspacing="0" id="tb">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>学号</th>
          <th>薪资</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      //  1. 准备好数据后端的数据
      let datasArr = [
        { name: '欧阳霸天', age: 10, gender: '男', stuId: '1001', salary: '2000', city: '上海' },
        { name: '令狐霸天', age: 12, gender: '男', stuId: '1002', salary: '208520', city: '北京' },
        { name: '诸葛霸天', age: 15, gender: '男', stuId: '1003', salary: '2042520', city: '南京' },
        { name: '欧阳炸炸', age: 17, gender: '男', stuId: '1005', salary: '1000', city: '南京' },
        { name: '欧阳炸炸', age: 13, gender: '男', stuId: '1007', salary: '17000', city: '南京' },
        { name: '欧阳炸炸1', age: 29, gender: '男', stuId: '1008', salary: '186223', city: '南京' },
        { name: '欧阳炸炸2', age: 19, gender: '男', stuId: '10019', salary: '14353', city: '南京' },
        { name: '欧阳炸炸3', age: 59, gender: '男', stuId: '1061', salary: '25353', city: '南京' },
        { name: '欧阳炸炸4', age: 169, gender: '男', stuId: '10099', salary: '456456', city: '南京' },
      ];
      let tbody = document.querySelector('tbody');
      // 渲染函数  把数组里面的数据渲染到页面中
      function render() {
        tbody.innerHTML = '';
        for (let i = 0; i < datasArr.length; i++) {
          // 1.创建tr
          let tr = document.createElement('tr');
          // 2.tr 里面放内容
          tr.innerHTML = `
          <td>${datasArr[i].name}</td>
          <td>${datasArr[i].age}</td>
          <td>${datasArr[i].gender}</td>
          <td>${datasArr[i].stuId}</td>
          <td>${datasArr[i].salary}</td>
          <td>${datasArr[i].city}</td>
          <td>
              <a href='javascript:;' id='del' >删除</a>
              <a href='javascript:;' id='modify' >修改</a>
          </td>
        `;
          tbody.appendChild(tr);
          let dels = document.querySelectorAll('#del');
          // 删除数据
          dels[i].onclick = function () {
            tbody.removeChild(dels[i].parentNode.parentNode);
            datasArr.splice(i, 1);
            render();
          };
          // 修改数据
          let modify = document.querySelectorAll('#modify');
          modify[i].onclick = function () {
            //获取该a的tr
            let tr = this.parentNode.parentNode;
            let tds = tr.getElementsByTagName('td');
            //获取到每一个td为他们绑定点击事件
            for (let i = 0; i < tds.length - 1; i++) {
              tds[i].index = i; // 为下面下标准备
              tds[i].onclick = function (e) {
                let input = document.createElement('input');
                if (e.target.tagName.toLowerCase() == 'td') {
                  input.value = this.innerHTML;
                  tds[this.index].innerHTML = ''; //清除td中原有的文字
                  tds[this.index].appendChild(input);
                  input.focus(); //获取焦点
                }
                //失去焦点保存,如果数据是动态获取的则可以在这个里面操作数据
                input.onblur = function () {
                  this.parentNode.innerHTML = this.value;
                  tds[i].onclick = null;
                };
              };
            }
          };
        }
      }
      // 页面加载就调用函数
      render();

      //年龄排序
      let key1 = true;
      btn_age.onclick = function () {
        if (key1) {
          btn_age.innerText = '年龄逆向排序';
          datasArr.sort(function (a, b) {
            return a.age - b.age;
          });
        } else {
          btn_age.innerText = '年龄正向排序';
          datasArr.sort(function (a, b) {
            return b.age - a.age;
          });
        }
        render();
        key1 = !key1;
      };
      //薪资排序
      let btn_salary = document.querySelector('.btn2');
      btn_salary.onclick = function () {
        if (key1) {
          btn_salary.innerText = '薪资逆向排序';
          datasArr.sort(function (a, b) {
            return a.salary - b.salary;
          });
        } else {
          btn_salary.innerText = '薪资正向排序';
          datasArr.sort(function (a, b) {
            return b.salary - a.salary;
          });
        }
        render();
        key1 = !key1;
      };
    </script>
  </body>
</html>

image-20210927234135881




文章评论

目录