动态生成表格案例（HTML+CSS+JS）

在这里实现一个动态添加表格的案例，当点击添加按钮时，可以弹出一个表单，然后将输入的内容添加到表格中，也可以将表格中的整行内容清除。
实现思路为：先创建一个表格和一个表单，将表单中输入的内容动态添加进表格中，表单页面右上角有一个关闭按钮，当点击时，可以将表单页面关闭并将表格页面显示。为了页面美观，我将添加数据的按钮放在了表格的<tfoot></tfoot>中，将动态生成的表格数据添加到<tbody><tbody>中，当点击添加按钮时，隐藏表格，并显示表单，在表单中填写要添加的信息，然后获取输入的信息，通过jquery生成表格的一行元素，并将获得的值添加进去，最后将这一行添加到<tbody><tbody>的最后一行，当点击表单页面的添加按钮时，让表单隐藏，并显示修改后的变革，因为还要实现动态删除功能，所以需要给表格中的每一行元素添加一个删除属性（超链接），当我们点击删除时，获取到其对应的行，进行删除操作。
实现代码为：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}table {width: 410px;margin: 100px auto 0;text-align: center;border-collapse: collapse;border-spacing: 0;border: 1px solid #ccc;}th,td {width:150px;height: 40px;border: 1px solid #ccc;padding: 10px;}a{text-decoration: none;}.btnAdd {width: 110px;height: 30px;font-size: 20px;}.item {position: relative;padding-left: 100px;padding-right: 20px;margin-bottom: 34px;}.lb {position: absolute;left: 0;top: 0;display: block;width: 100px;text-align: right;}.txt {width: 300px;height: 32px;}.form-add {position: absolute;top: 100px;left: 578px;border: 1px solid #ccc;margin-left: -197px;padding-bottom: 20px;display: none;}.title {background-color: #f7f7f7;border-width: 1px 1px 0 1px;border-bottom: 0;margin-bottom: 15px;position: relative;}span {width: auto;height: 18px;font-size: 16px;color: rgb(102, 102, 102);text-indent: 12px;padding: 8px 0px 10px;margin-right: 10px;display: block;overflow: hidden;text-align: left;}.title div {width: 16px;height: 20px;position: absolute;right: 10px;top: 6px;font-size: 30px;line-height: 16px;cursor: pointer;}.submit {text-align: center;}.submit input {width: 170px;height: 32px;}</style></head>
<body><!--按钮和表单--><table><thead><tr><th>班级</th><th>姓名</th><th>学号</th><th>操作</th></tr></thead><tbody id="j_tb"><tr><td>1班</td><td>小王</td><td>001</td><td><a href="javascrip:;" class="get">删除</a></td></tr><tr><td>2班</td><td>小熊</td><td>002</td><td><a href="javascrip:;" class="get">删除</a></td></tr></tbody><tfoot><tr><td id="j_btnAddData" class="btnAdd" colspan="4">添加数据</td></tr></tfoot></table><!--添加数据的表单--><div id="j_formAdd" class="form-add"><div class="title"><span>添加数据</span><div id="j_hideFormAdd">×</div></div><div class="item"><label class="lb" for="">班级：</label><input class="txt" type="text" id="classes" placeholder="请输入班级"></div><div class="item"><label class="lb" for="">姓名：</label><input class="txt" type="text" id="uname" placeholder="请输入姓名"></div><div class="item"><label class="lb" for="">学号：</label><input class="txt" type="text" id="order" placeholder="请输入学号"></div><div class="submit"><input type="button" value="添加" id="j_btnAdd"></div></div>
</body>
</html><script src="jquery.js"></script>
<script>$(function () {$('#j_btnAddData').click(function () {$('#j_formAdd').show();$('table').hide()});$('#j_hideFormAdd').click(function () {$('#j_formAdd').hide();$('table').show()});$('#j_btnAdd').click(function () {$('table').show()$('#j_formAdd').hide();var classes = $('#classes').val(); var uname = $('#uname').val(); var order = $('#order').val(); var New =$( '<tr>' +'<td>'+classes+'</td>'+'<td>'+uname+'</td>' +'<td>'+order+'</td>' +'<td><a href="javascrip:;" class="get">删除</a></td>' +'</tr>' );$('#j_tb').append(New);});$('#j_tb').on('click','.get', function () {$(this).parent().parent().remove();});});
</script>

实现效果为：

动态生成表格案例（HTML+CSS+JS）相关推荐

JavaScript-178：动态生成表格案例
效果图结构 <table><thead><tr><th>姓名</th><th>科目</th><th>成 ...
javascript案例：动态生成表格
js案例:动态生成表格一.文字梳理 * 创建一个页面:两个输入框和一个按钮 * 第一步:得到输入的行和列的值 * 第二步:生成表格 - 循环行 - 在行里面循环单元格 * 第三步:把表格(表格放到变 ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
js动态生成表格(原创)
原文:js动态生成表格(原创) 源代码下载地址:http://www.zuidaima.com/share/1571860936543232.htm 原生js实现,兼容各主流浏览器,提供生成表格,修改 ...
js动态生成表格【含合并单元格的表格】
最近遇到需求,动态生成表格,类似Excel,支持合并单元格的表格,代码分享给大家~ 一.网上找到的简单生成表格的例子: 以下是生成规则表格m行*n列类似,可以直接打开HTML查看结果. <!DO ...
JSON格式化动态生成表格表格转置行列转换 Excel导出
先看效果初始化: JSON格式化 : 生成表格-方式1 : 生成表格-方式2 : Excel导出需要行求和.列求和功能的查看 JSON格式化动态生成表格表格转置行列转换 Excel导出行求 ...
动态生成表格之新增学生信息
动态生成表格之新增学生信息: 功能需求: 当点击新增按钮时弹出模态框不允许其中一项为空点击"保存"时,数据保存并添加成功后关闭模态框前期准备工作: 1.引入bootstrap ...
Extjs 动态生成表格
在web显示数据时,会遇到grid的列数和行数不确定的这种情况.如何来根据数据动态的创建表格呢? Extjs 的json data给我们带来了一个很好的比较简单的方法. 要创建一个grid需要确定它的 ...
动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证
PS: 游戏公司后台开发,工作模式:996. 于是写博客这事也荒废了.... 想想还是写一点吧. 呵呵,请不要笑话我注释写这么多,习惯了,我上班写代码都是有注释的. 我建两个相似的表是为了,给后台使用 ...

动态生成表格案例（HTML+CSS+JS）

动态生成表格案例（HTML+CSS+JS）相关推荐

最新文章

热门文章