JS案例——动态表格1

Tastgood

已于 2023-08-05 12:55:15 修改

阅读量126

点赞数

分类专栏： Case 文章标签： javascript 前端

于 2023-08-05 12:50:07 首次发布

本文链接：https://blog.csdn.net/tastgood/article/details/132098796

版权

Case 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何构建一个HTML表单，包括默认选项选择、使用JavaScript获取和操作表单元素、数据提交与存储、动态渲染表格以及利用事件委托实现删除功能。同时提到了`autocomplete`属性的使用和`submit`按钮改为`button`类型的优化。

摘要由CSDN通过智能技术生成

一、写结构

<body>
  <form autocomplete="off">
    姓名：<input type="text" placeholder="请输入姓名" id="name"></br>
    科目：<select id="obj">
            <option selected>请选择科目</option>
            <option value="HTML">HTML</option>
            <option value="REACT">REACT</option>
            <option value="CSS">CSS</option>
            <option value="VUE">VUE</option>
          </select></br>
                
    成绩：<input type="text" placeholder="请输入成绩" id="score"></br>
    <button id="sub" type="button">提交</button>
    <hr>
    <table border="1px">
      <thead>
        <th><input type="checkbox"></th><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th>
        
      </thead>
      <tbody>

      </tbody>
    </table>
  </form>
</body>

通过在option标签上设置selected属性，即可实现默认选中的option

注：在多次输入姓名后单击提交，再单击输入框时，有如下效果。这里使用autocomplete关闭自动补全即可

<form autocomplete="off">

autocomplete 属性表示输入字段是否应该启用自动完成功能，off为关闭，on为开启。

二、获取元素

  var username=document.querySelector('#name');
  var obj=document.querySelector('#obj');
  var score=document.querySelector('#score');
  var sub=document.querySelector('#sub');
  var del=document.querySelectorAll('.del')
  var tbody=document.querySelector('tbody');

三、添加功能的实现

1、声明一个数组用来存放输入的数据

  var userList=[]

2、给提交按钮添加点击事件

oSub.onclick=function(){
    //1、点击按钮，将输入的数据追加到userList数组中
    userList.push(//此时push一个对象
    { //key:value      多个用逗号隔开
      id:Date.now(),  //用时间戳作为id，时间戳永远唯一
      name:name.value,
      obj:obj.value,
      score:score.value
    })

    console.log(userList)//test
  }

注：输入数据提交后发现，控制台没有输出。页面闪烁了一下。在地址栏html后出现一个问号，如下图所示。

其原因是 <button>嵌套在<form>里面，默认type="submit"，只需将type属性值改为"button"即可。

<form>
<button id="sub" type="button">提交</button>
</form>

5、清空userList的值

    name.value='';
    obj.value='';
    score.value='';

6、封装一个数据渲染的方法

function render(){
    var str=''
     for(var i=0;i<userList.length;i++){
      str +=
       '<tr>'+
          '<td><input type="checkbox"/></td>'+
          '<td>'+userList[i].username+'</td>'+
          '<td>'+userList[i].obj+'</td>'+
          '<td>'+userList[i].score+'</td>'+
          '<td><button type="button" class="del" data-id="'+userList[i].id+'">删除</button></td>'+
       '</tr>'
     }
     //将数据渲染到页面上
     tbody.innerHTML=str;
  }

四、删除功能的实现

若添加的信息过多，不方便用for遍历每个del按钮,给del添加点击事件,造成访问DOM的次数过多，会延长整个页面的交互就绪时间。
所以，这里我们就可以用到事件委托，即给tbody注册点击事件，然后利用事件对象的 target 来找到当前点击的 del按钮，因为点击del按钮，事件会冒泡到tbody上，tbody有注册事件，就会触发事件监听器。

1、给tbody添加点击事件

tbody.onclick=function(ev){}

2、判断点击的元素是否具有值为del的class属性（也就是判断点击的是不是删除按钮）

if (ev.target.classList.contains('del')){
   //有则是删除按钮
}

3、获取当前绑定元素的id


        /**
         * h5新增的获取自定义属性的方法 它只能获取data-开头的 
         * dataset 是一个集合里面存放了所有以data开头的自定义属性
        */

        var id = ev.target.dataset.id;

4、根据条件（id），查找满足条件的下标 findindex()

 var idx=userList.findIndex(function(item){
          return item.id==id
          //若用三个===，则不能正确返回idx。因为var id 是字符串。而item.id是一个值。类型不符。
          
        })

5、执行删除操作，从数组中删除对应元素