在表格中添加行和删除行

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

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

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

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

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

view层的代码：


Controller层的代码：

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