JavaScript如何实现动态生成表格

魁首哥

作者

JavaScript如何实现动态生成表格

这篇文章给大家分享的是有关JavaScript如何实现动态生成表格的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

前言

在这里实现一个动态添加表格的案例，当点击添加按钮时，可以弹出一个表单，然后将输入的内容添加到表格中，也可以将表格中的整行内容清除。

实现思路

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

实现代码

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>*{padding:0;margin:0;}table{width:410px;margin:100pxauto0;text-align:center;border-collapse:collapse;border-spacing:0;border:1pxsolid#ccc;}th,td{width:150px;height:40px;border:1pxsolid#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:1pxsolid#ccc;margin-left:-197px;padding-bottom:20px;display:none;}.title{background-color:#f7f7f7;border-width:1px1px01px;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:8px0px10px;margin-right:10px;display:block;overflow:hidden;text-align:left;}.titlediv{width:16px;height:20px;position:absolute;right:10px;top:6px;font-size:30px;line-height:16px;cursor:pointer;}.submit{text-align:center;}.submitinput{width:170px;height:32px;}</style></head><body><table><thead><tr><th>班级</th><th>姓名</th><th>学号</th><th>操作</th></tr></thead><tbodyid="j_tb"><tr><td>1班</td><td>小王</td><td>001</td><td><ahref="javascrip:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="get">删除</a></td></tr><tr><td>2班</td><td>小熊</td><td>002</td><td><ahref="javascrip:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="get">删除</a></td></tr></tbody><tfoot><tr><tdid="j_btnAddData"class="btnAdd"colspan="4">添加数据</td></tr></tfoot></table><divid="j_formAdd"class="form-add"><divclass="title"><span>添加数据</span><divid="j_hideFormAdd">×</div></div><divclass="item"><labelclass="lb"for="">班级：</label><inputclass="txt"type="text"id="classes"placeholder="请输入班级"></div><divclass="item"><labelclass="lb"for="">姓名：</label><inputclass="txt"type="text"id="uname"placeholder="请输入姓名"></div><divclass="item"><labelclass="lb"for="">学号：</label><inputclass="txt"type="text"id="order"placeholder="请输入学号"></div><divclass="submit"><inputtype="button"value="添加"id="j_btnAdd"></div></div></body></html><scriptsrc="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();varclasses=$('#classes').val();varuname=$('#uname').val();varorder=$('#order').val();varNew=$('<tr>'+'<td>'+classes+'</td>'+'<td>'+uname+'</td>'+'<td>'+order+'</td>'+'<td><ahref="javascrip:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="get">删除</a></td>'+'</tr>');$('#j_tb').append(New);});$('#j_tb').on('click','.get',function(){$(this).parent().parent().remove();});});</script>