根据需求增加或删除表格行
…………………………………………………………………………………………………
开发工具与关键技术:Visual Studio C#
作者:林敏静
撰写时间:7月15日
…………………………………………………………………………………………………
不知道大家在做项目的页面的时候有没有因为一些“奇奇怪怪”的页面需求而烦恼过呢?我这里就有一个,关于可输入信息的表格的,下面来同大家分享一下!
如下图,这是用Bookstrap插件写的表格,除了表头和按钮,表格里面的内容在未提交前都可以进行输入或修改,表格原本就拥有一行内容,根据需求可以点击按钮在原有的表格行下方增加新的表格行,每点击一次就增加一行。
如果不需要那么多表格行,可以进行选择删除任意表格行,点击哪个表格行的删除按钮就删除哪一行,但是最终必须保留一行(不管填表与否,若点击删除会进行提示不能删除),如下图,点击删除按钮时会进行询问,以免误删。
下面是HTML代码部分,其实就是写表格的代码,事先已写好一行表格内容,若有增加的表格行,这行表格也是可以删除的,只要你最终保留一行就行了。
接着就看增加表格行的代码,就是把拼接HTML的字符串也就是一个表格行,添加到表格中去。
删除这里呢,这里的询问提示我用的是layui插件来写(应该不止我一个人把bookstrap和layui这两个插件混搭着来用的),具体就是声明它的父级元素(表格),把它的子元素(选择的表格行)移除掉。
那么本篇学习文章就分享到这里啦!若有不足的地方,还望请多多指教!
如果觉得《根据需求增加或删除表格行》对你有帮助,请点赞、收藏,并留下你的观点哦!