js增减行数据

下面是本人做的一个简单的新增和删减行数据的方法
html样式:
在这里插入图片描述
这是css样式,就一些宽高和背景颜色什么的,可以自己定义。
在这里插入图片描述
下面是JS代码
首先获取表格的id、加减按钮的id、给两个按钮添加点击事件(点击事件由后面写完点击事件的方法后添加)
在这里插入图片描述
声明一个方法zj,添加表格行时调用并获取元素(标签)td,声明了5个变量接收td标签
在这里插入图片描述
用这5个变量接受页面td的值,”javascript:;“防止点击后返回顶部
在这里插入图片描述
定义有个变量ntr,获取到行,然后用appendChild这个方法在tr标签后面添加前面定义好了的td数据,实现点击加号新增一行的目的
在这里插入图片描述
定义一个删除的方法,这里的obj是自定义的量,它输出的结果是一行末尾的减号,然后再声明2个变量,其中第一个变量获取到的是table标签,因为减号所在的节点的a标签,.parentNode获取到的是td标签,.parentNode.parentNode获取到的是tr标签,.parentNode.parentNode.parentNode获取到的是table标签,同理,声明另一个变量,获取到table标签中的tr标签,tr代表的是一行,所以one.removeChild(two)就是删除一行,然后用减号调用这个方法实现删除一行的方法。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值