checkbox选择后动态生成table解决方法

来源：互联网 2023-03-16 23:57:28 424

在html网页开发中，我们有时会有各种各样的业务逻辑，比如在一个checkbox选择后，需要动态新建一个table来显示数据，这样的需求怎么处理？下面来看下。

方法/步骤

为了方便操作，我们使用Jquery来对dom操作。所以先引入Jquery插件库。

html里，简单一点，只创建一个checkbox控件，和一个空的div，这个div主要是稍后作为table的容器的。

checkbox选择后动态生成table解决方法

添加脚本代码，我们先为checkbox控件，添加点击事件，当选中后，就调用创建table的方法

checkbox选择后动态生成table解决方法

接着实现创建table的代码，主要是通过Jquery的append方法，把table的html字符串附加到div容器里就行了。

checkbox选择后动态生成table解决方法

运行页面，可以看到现在页面上就有一个checkbox控件。

checkbox选择后动态生成table解决方法

5本页面未经授权抓取自百度经验

点击选中checkbox后，table生成显示出来了。

checkbox选择后动态生成table解决方法

生成的table没有样式，很丑陋，我们可以在生成table的html时，添加上bootstrap的table样式：class='table table-bordered'。

重新刷新页面，可以看到现在的表格美观很多了。

checkbox选择后动态生成table解决方法

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！