表格内部添加行样式

                                表格内部添加行样式

开发工具与关键技术:Visual Studio 2015
作者:昨夜星辰
撰写时间:2019年 06月 27日
一、在前几天我遇到了一个开发项目时的难题,以为项目开发的需求原因,要实现一个在查询表格里面写一个下拉框样是还有通过鼠标右键点击弹出按钮添加行的样式,这个问题困扰了我一周,但是在不断到的更新和修改后,还是把功能做了出来,下面就像大家演示一下我做的页面功能。
二、首先给一个按钮的样式,通过点击按钮添加行的数据,然后把按钮隐藏,是因为方便后面通过鼠标单击右键才显示。
在这里插入图片描述
三、然后获取鼠标的oncontextmenu事件,当触发上下文菜单时运行脚本,然后判断点击事件,通过判断Oncontextmenu的触发事件,获取鼠标的键位,判断鼠标点击的事件,声明需要添加的表格id,然后判断需要添加的样式,
在这里插入图片描述
四、然后通过获取表格里面的下拉框数据id,绑定数据,在通过选中一个下拉框数据,把相关的表单数据回填到表格数据里面,声明一个变量,通过标签获取里面的值,然后通过post请求传输数据给控制器查询数据,把需要查询的id赋值给声明的值,然后封装数据,最后表其它的表单数据回填到页面。
在这里插入图片描述
五、因为需要添加行的数据,所以要通过表头的数据判断,所以需要把表头书写出来,通过判断表头的数据来获取添加行的内容,
在这里插入图片描述
六、然后就是点击添加行的方法了,首先声明一个变量,用来或取行的长度,然后通过行的长度来添加行的数据,在声明一个需要添加行的数据内容,通过表头的长度把你需要的表格内容是下拉框,还是input标签,可以自己写入的表格样式,通过id来添加行数据,通过拼接一个counts来把添加行里面的数据,因为id是唯一的,所以你需要获取数据只能获取到第一条数据,所以你要拼接一个值给它,让他每添加一行数据,就自增加一的赋值,就可以把每一条的数据查询显示出来了,最后把需要回填的数据也潘姐一个值给它就可以新增数据,然后把方法放到上面的添加代码上面给它加一个点击事件就可以了。
在这里插入图片描述
七、下面来讲解一下,删除行的数据,通过一个方法,获取到表格头部下面的行数据,再通过判断,如果最后只剩一行数据的时候,那就弹出一个提示,不能删除最后一行的数据,一个删除就这样完成了,然后把方法放到删除的点击事件里面,就可以运行了。
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值