js动态添加表格逐行添加、删除、遍历取值

2018-01-25 19:13:23来源:cnblogs.com作者:天涯韵人点击

分享

  关于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><div>    <div 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></div></div></body></html>

 js动态生成其他的也同理,可根据自己需要在指定位置创建自己所需要的元素。

微信扫一扫

第七城市微信公众平台