js动态添加表格逐行添加、删除、遍历取值的实例代码

2018-01-30 08:19:45来源:作者:人点击

分享

关于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动态生成其他的也同理,可根据自己需要在指定位置创建自己所需要的元素。

总结

以上所述是小编给大家介绍的js动态添加表格逐行添加、删除、遍历取值的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对第七城市网站的支持!

您可能感兴趣的文章:

  • js实现动态添加、删除行、onkeyup表格求和示例
  • JavaScript动态操作表格实例(添加,删除行,列及单元格)
  • javascript如何动态加载表格与动态添加表格行
  • JS小功能(操作Table--动态添加删除表格及数据)实现代码
  • javascript动态向网页中添加表格实现代码
  • 动态添加删除表格行的js实现代码
  • js生成动态表格并为每个单元格添加单击事件的方法

微信扫一扫

第七城市微信公众平台