JavaScript小案例-动态表格

JavaScript小案例-动态表格

需求

1. 数据静态存贮，数据类型：对象，属性值：id,names

2. 可以在页面中输入数据后，对数据进行存储(存贮在datas数组中)，在页面中显示出来。

3. id不用输入，自动生成，names值通过表格底部的输入框输入。

4. 可以通过点击操作栏中的按钮，进行删除

5. 可以实现键盘监听keyup,按下enter键，快捷输入。

代码

• html

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
    
    
    <div class="container">
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>编号</td>
          <td>类别</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    <form class="form-inline">

      <div class="form-group">
        <label for="exampleInputName2"></label></label>
        <input type="text" class="form-control category" id="exampleInputName2" placeholder="动物类别">
      </div>

      <button type="submit" class="btn btn-default">Send </button>
    </form>
  </div>

• css

  <style>
    span {
      cursor: pointer;
    }
  </style>

• js

 <script>
    //1. 读取数据，渲染表格
    var tbody = document.querySelector("tbody")
    var btn = document.querySelector(".btn")
    var id = document.querySelector('.id')
    var cate = document.querySelector('.category')

    var datas = [
      { id: 1, names: "🐟" },
      { id: 2, names: "🐖" },
      { id: 3, names: "🐕" },
      { id: 4, names: "🐂" },
      { id: 5, names: "🐥" },
      { id: 6, names: "🐓" },
      { id: 7, names: "🐍" },
      { id: 8, names: "🐱" },
      { id: 9, names: "🦊" },
      { id: 10, names: "🐇" },
    ]
    var str = ""

    // console.log(datas);



    render(datas)

    btn.addEventListener('click', function (e) {
      var _id = datas[datas.length - 1].id + 1
      //1.阻止表单默认提交
      e.preventDefault();
      //2.获取表单的值
      console.log(cate.value);
      //3.生成对象
      var obj = {
        id: _id,
        names: cate.value
      }
      console.log(obj);
      //4.插入到datas中
      datas.push(obj);
      //5.数据渲染
      str = ""

      render(datas);

      cate.value = ""
    }, false)


    function render(arr) {
      for (var i = 0; i < datas.length; i++) {
        str += `<tr id=${arr[i].id}>
          <td>${arr[i].id}</td>
          <td>${arr[i].names}</td>
          <td><span class="glyphicon glyphicon-remove"></span></td>
        </tr>`
      }
      tbody.innerHTML = str
    }

    //3. 删除：获取span 给span添加点击事件，找父节点；从tody中通过removeChild移除
    // 数据思维：找到删除按钮span，找到span对应的数据的id;从数组中删除数据，重新渲染数据
    // 事件委派    对象.属性;  splice();  render()
    // findeIndex(),splice(); render()

    //事件委派，动态创建的元素，给tbody动态委派,和e.target配合使用

    tbody.addEventListener('click', function (e) {
      e == e || window.event
      //判断点击元素是否是span
      if (e.target.nodeName == "SPAN") {
        //找span对应的id
        var _id = e.target.parentNode.parentNode.id;
        //数组下标
        var _index = datas.findIndex(function (v, i) {
          return v.id == _id;
        })
        //删除数据
        datas.splice(_index, 1);
        str = ""
        render(datas)
      }
      if (datas.length == 0) {
        var _id = 0;
      } else {
        var _id = datas[datas.length - 1].id + 1
      }

    }, false)
    var span = document.querySelectorAll('span')
    console.log(span);
    console.log((2 == true) + 1);
  </script>

注意点

1. span（X号）的事件添加：并不是一个一个去添加，而是通过事件委托，通过给其父元素tbody添加点击事件，并通过e.target来找到点击的元素。e.target返回的时点击的元素，和this不同
2. 给tbody添加点击事件后，tr,td点击后也会冒泡，但我们只想在点击span(X号)触发点击点击事件，所以通过e.target.nodeName == "SPAN"添加了判断，可以唯一标识span，让只有点击span(X号)时，才触发事件。
3. 在创建元素时添加id属性:< tr id=${arr[i].id} >，属性值就是datas数组里各个对象的id值，再通过当前点击的span(X号)进行获取：var _id = e.target.parentNode.parentNode.id;。
4. 使用数组对象的findIndex(),寻找id值，并返回数组的下标 return v.id == _id; 。
5. 使用splice对数组进行删除
6. 接受表单传过来的值的时候，使用e.preventDefault();事件对象来阻止表单的默认提交。

效果图