您好,欢迎访问一九零五行业门户网

js动态操作表格

这次给大家带来js动态操作表格,使用js动态操作表格的注意事项有哪些,下面就是实战案例,一起来看一下。
关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可。
功能包括:表格添加一行,表格删除一行,表格遍历取值等。
点击说明:点击添加按钮,则表格添加一行,可进行录入,删除按钮,可删除当前行,其他行不影响。删除或者添加,每行的的编号都会自动变化,套餐和价格是<input/>,内容是
<textarea></textarea>,点击保存按钮的时候,遍历表格中所有行,把所有行的数据取出来弹框弹出展示,后期可根据需求传递到后台进行处理。
效果图:
源代码:
<!-- creator: wangpeng createtime : 2018-01-25 去年今日此门中,人面桃花相映红。 人面不知何处去,桃花依旧笑春风。 --> <!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <title>动态增加表格</title> </head> <style>   td /*设置表格文字左右和上下居中对齐*/   {     vertical-align: middle;     text-align: center;     padding: 9px;   }   textarea{     min-height: 60px;     min-width: 200px;   } </style> <script type="text/javascript">   function del(obj){     if(document.getelementbyid('tbodyid').children.length>1){     var trid=obj.parentnode.parentnode.id;     var objtr=document.getelementbyid(trid);     document.getelementbyid('tbodyid').removechild(objtr);     var tbody=document.getelementbyid('tbodyid');     var countchildren=tbody.childelementcount;     for (var i=0;i<countchildren;i++){ tbody.children[i].children[0].innerhtml=i+1; } } else{ alert("请不要全部删除"); } } function add(){ var trid = new date().gettime(); var packageid=trid+'packageid'; var countid=trid+'countid'; var priceid=trid+'priceid'; var objtr=document.createelement('tr'); objtr.id=trid; objtr.innerhtml="<td></td>  +           <td><input id='"+trid+"packageid'></td>  +           <td><textarea id='"+trid+"countid'></textarea></td>  +           <td><input id='"+trid+"priceid'></td>  +           <td><button type='button' onclick='del(this)'>删除</button></td>;     document.getelementbyid(tbodyid).appendchild(objtr);     var tbodyobj=document.getelementbyid('tbodyid');     var countchildren=tbodyobj.childelementcount;     for (var i=0;i<countchildren;i++){ tbodyobj.children[i].children[0].innerhtml=i+1; } } function save(){ var tbodyobj=document.getelementbyid('tbodyid'); var countchildren=tbodyobj.childelementcount; var trid=""; var packageid=""; var countid=""; var priceid=""; var list=new array(); for (var i=0;i<countchildren;i++){ trid=tbodyobj.children[i].id; packageid=trid+"packageid"; countid=trid+"countid"; priceid=trid+"priceid"; var map={ "套餐":document.getelementbyid(packageid).value, "内容":document.getelementbyid(countid).value, "价格":document.getelementbyid(priceid).value } list.push(map); } console.log("list:",list); alert(json.stringify(list)); } </script> <body> <p>   <p style="width: 80%;margin: 10%">   <table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%">     <caption>动态增加表格</caption>     <thead>     <tr>       <th width="5% ">序号</th>       <th width="20%">套餐</th>       <th width="30%">内容</th>       <th width="10%">价格</th>       <th width="10%">操作</th>     </tr>     </thead>     <tbody id="tbodyid">     <tr id="123">       <td>1</td>       <td><input id="123packageid"></td>       <td><textarea id="123countid"></textarea></td>       <td><input id="123priceid"></td>       <td><button type="button" onclick='del(this)'>删除</button></td>     </tr>     </tbody>   </table>     <button type="button" onclick='add()'>添加</button>     <button type="button" onclick='save()'>保存</button> </p> </p> </body> </html>
js动态生成其他的也同理,可根据自己需要在指定位置创建自己所需要的元素。
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
jquery代码优化方式的总结
node.js的非对称加密详解
360浏览器兼容模式的页面显示不全怎么处理
inline-block元素默认间距清除
以上就是js动态操作表格的详细内容。
其它类似信息

推荐信息