js中如何對表格進(jìn)行逐行添加

發(fā)布時(shí)間：2021-06-26 15:15:14 來源：億速云閱讀：267 作者：小新欄目：web開發(fā)

這篇文章主要介紹了js中如何對表格進(jìn)行逐行添加，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

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

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

效果圖：

js中如何對表格進(jìn)行逐行添加

源代碼：

<!--
  Creator： WangPeng
  CreateTime : 2018-01-25
  去年今日此門中，人面桃花相映紅。
  人面不知何處去，桃花依舊笑春風(fēng)。
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動態(tài)增加表格</title>
</head>
<style>
  td /*設(shè)置表格文字左右和上下居中對齊*/
  {
    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,
      "價(jià)格":document.getElementById(priceid).value
      }
      list.push(map);
    }
    console.log("list:",list);
    alert(JSON.stringify(list));
  }
</script>
<body>
<div>
  <div >
  <table border="1" bordercolor="#a0c6e5"  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%">價(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動態(tài)生成其他的也同理，可根據(jù)自己需要在指定位置創(chuàng)建自己所需要的元素。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js中如何對表格進(jìn)行逐行添加”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

js中如何對表格進(jìn)行逐行添加

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽