js動態(tài)添加表格逐行添加、刪除、遍歷取值的實例代碼

更新時間：2018年01月25日 16:32:12 作者：天涯韻

最近做項目遇到這樣的需求，要求表格添加一行，表格刪除一行，表格遍歷取值等。下面小編給大家?guī)砹薺s動態(tài)添加表格逐行添加、刪除、遍歷取值的實例代碼，需要的朋友參考下

關(guān)于js對表格進行逐行添加，今天抽空整理了一下：新建一個html文件（沒有編輯器的可以新建一個demo.txt文件，然后改后綴名為demo.html），把下面代碼全部貼進去即可。

功能包括：表格添加一行，表格刪除一行，表格遍歷取值等。

點擊說明：點擊添加按鈕，則表格添加一行，可進行錄入，刪除按鈕，可刪除當前行，其他行不影響。刪除或者添加，每行的的編號都會自動變化，套餐和價格是<input/>，內(nèi)容是

<textarea></textarea>,點擊保存按鈕的時候，遍歷表格中所有行，把所有行的數(shù)據(jù)取出來彈框彈出展示，后期可根據(jù)需求傳遞到后臺進行處理。

效果圖：

源代碼：

<!--
  Creator： WangPeng
  CreateTime : 2018-01-25
  去年今日此門中，人面桃花相映紅。
  人面不知何處去，桃花依舊笑春風。
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動態(tài)增加表格</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,
      "內(nèi)容":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>動態(tài)增加表格</caption>
    <thead>
    <tr>
      <th width="5% ">序號</th>
      <th width="20%">套餐</th>
      <th width="30%">內(nèi)容</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動態(tài)生成其他的也同理，可根據(jù)自己需要在指定位置創(chuàng)建自己所需要的元素。

總結(jié)

以上所述是小編給大家介紹的js動態(tài)添加表格逐行添加、刪除、遍歷取值的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript實現(xiàn)網(wǎng)頁背景煙花效果的方法
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)頁背景煙花效果的方法,涉及javascript數(shù)學運算及頁面元素動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
Javarscript中模塊(module)、加載(load)與捆綁(bundle)詳解
這篇文章主要給大家介紹了關(guān)于Javarscript中模塊(module)、加載(load)與捆綁(bundle)的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。
2017-05-05
詳解微信小程序中數(shù)據(jù)雙向綁定如何實現(xiàn)
最近在小程序的開發(fā)過程中,需要用到雙向綁定,遇到報錯才知道微信本身是不支持對象雙向綁定的,鏖戰(zhàn)一番找到解決方案,下面這篇文章主要給大家介紹了關(guān)于微信小程序中數(shù)據(jù)雙向綁定如何實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2023-05-05
本文主要介紹了javascript將字符串中的每一個單詞的首字母變?yōu)榇髮懫溆嗑鶠樾懙姆椒?。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01