在表格中添加行和删除行

在我们刚接触MVC项目的时候，遇见的表格几乎都是固定的，不可以编辑，也不支持任意添加行和删除行，经常使用的bootstrap的人都知道，目前bootstrap表格都是固定的行数或者是根据数据的数量来决定的，如果需要添加行或者删除行，那就有点费劲，不过现在的layui中可以实现这种操作，表格内都是可以编辑的，也就是说，数据除了可以在表格中查询出来，也可以在表格中编辑录入了。但是我们除了这种插件外，还是可以实现在表格中编辑的效果的，那就是利用append拼接表格，然后来达到在表格中动态操作的效果。
首先我们来看一下效果截图：

在效果图中我们可以看到，在表格左上角上有两个按钮，分别是：“添加专家”和“删除专家”，当我们点击“添加专家”按钮的时候，表格下面就会自动添加一行，即使表格中含有可选择的下拉框选项或者普通的文本框，都是可以添加的，这个不影响操作，前提是我们在拼接的时候，区分下拉框和文本框的标签就可以了，下面看一下点击“添加专家”按钮后的效果图：

接着，既然可以添加，那么肯定也是可以删除的，所以我们点击“删除专家”按钮的时候，表格下面就会自动删除一行，不过这里需要注意的是，需要根据复选框的选中与否来判断的，即删除的时候，需要选中复选框才可以执行删除操作，当复选框没有被选中的时候，就会弹出提示框提示用户没有选中复选框，无法删除。下面看一下点击“删除专家”按钮后的效果图：

以上是没有选中复选框就去点击“删除专家”按钮后的结果——操作失败；

以上是选中复选框才去点击“删除专家”按钮后的结果——操作成功；
具体实现的代码如下：
html中的代码：

view层的代码：

Controller层的代码：

以上就是在表格中添加行和删除行的代码了，总之：这种方法就是把你想要的表格效果通过append拼接是连接起来，然后绑定到表格中罢了。注意事件之间的调用！

在表格中添加行和删除行相关推荐

Word控件Spire.Doc 【Table】教程(17)：如何在 C#、VB.NET 中删除 Word 表格中的行和列
Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Micr ...
ag-grid 表格中添加图片
ag-grid是一种非常好用的表格,网上搜索会有各种各样的基本用法,不过对于在ag-grid 表格中添加图片我没有找到方法,看了官方的文档,当然英文的自己也是靠网页翻译,最后发现有这么一个例子,我知道 ...
java表格怎么添加按钮_1.6.2 在表格中添加按钮
1.6.2 在表格中添加按钮表格用于显示复合数据,其中可以指定表格的表头和表文.默认的表格控件完全是以文本方式显示目标数据,要实现在表格中添加按钮或其他组件就要通过设置自定义的渲染器来实现 ...
Java向word表格中添加新行并赋值
前言: 相信大家都有过操作word文档表格的经历,对于每行数据的记录与操作是比较方便的.但这是不够的,对于一些OA项目,则需要在线打开word文档并通过后台的设置将数据添加到word表格中,甚至对表格 ...
html中怎么给表格增加序号,如何给word表格中添加编号
在Word中制作表格时都希望在表格的第一列增加一个序号,其作用可以标识行或统计行数.例如从1开始,一直到80.100甚至更多.那么怎么添加呢?采用手工进行编辑还是其他的?手工编辑显然是一件不可能的事, ...
pyqt5在表格中添加单选框（勾选框）
先看效果图; 下面是添加后面勾选框的代码: self.cbs = []for r in range(self.rows): # 添加勾选for c in range(self.cols):if c = ...
ajax异步获取数据后动态向表格中添加数据的页面
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
Latex在表格中添加图片
1.不添加图片 \end{table} \begin{table}[h]\caption{Name of this table}\centering\begin{tabular}{ | c | l | ...

在表格中添加行和删除行

在表格中添加行和删除行相关推荐

最新文章

热门文章