信息录入系统

1、给表格设置样式

2、表格布局

3、let sex=document.getElementById('sex');

     let btn=document.getElementById('btn');

        var ipt=document.querySelectorAll('input');

         var tbody=document.querySelector('.tbody');

       

        var arr=[];

        btn.onclick=function(){

     let stus={name:ipt[0].value,age:ipt[1].value,sex:sex.value,phone:ipt[2].value};            arr.push(stus);

          let tr='';/*以拼接的形式添加，里面的内容相当于字符串*/

         arr.forEach((item,index)=>{  /*箭头函数*/

             tr += '<tr>'+

                 '<td>'+item.name+'</td>'+

                 '<td>'+item.age+'</td>'+

                 '<td>'+item.sex+'</td>'+

                 '<td>'+item.phone+'</td>'+

                 "<td onclick='del("+index+")'>删除</td>"+

             '</tr>';   /*字符拼接式的标签*/

             

         });

             tbody.innerHTML=tr;

         }

        function del(index){

            console.log(index);/*点击直接获取到这个td的父级tr的索引值*/

            arr.splice(index,1);

            console.log(arr);

    var tr=document.querySelectorAll('.tbody tr');

    tbody.removeChild(tbody.childNodes[index]);/*第一种做法,这个不行有bug*/

         

        }

4、最后给大家看看成果图