JavaScript小案例-动态表格

需求

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

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

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

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

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

代码

• html

  
  
    
    
    

    

      

        

          
编号
          
类别
          
操作
        
      
      

      
    
    


      

        
        
      

      Send 
    
  

• css

• js

注意点

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();事件对象来阻止表单的默认提交。

效果图