快捷導(dǎo)航

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

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

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

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

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

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

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

效果圖：

源代碼：

<!--
  Creator： WangPeng
  CreateTime : 2018-01-25
  去年今日此門中，人面桃花相映紅。
  人面不知何處去，桃花依舊笑春風(fēng)。
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動(dòng)態(tài)增加表格</title>
</head>
<style>
  td /*設(shè)置表格文字左右和上下居中對(duì)齊*/
  {
    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("請(qǐng)不要全部刪除");
    }
  }
  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,
      "價(jià)格":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>動(dòng)態(tài)增加表格</caption>
    <thead>
    <tr>
      <th width="5% ">序號(hào)</th>
      <th width="20%">套餐</th>
      <th width="30%">內(nèi)容</th>
      <th width="10%">價(jià)格</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動(dòng)態(tài)生成其他的也同理，可根據(jù)自己需要在指定位置創(chuàng)建自己所需要的元素。

總結(jié)

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

您可能感興趣的文章: