信息录入系统

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、最后给大家看看成果图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

书199

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值