快捷導(dǎo)航

js動態(tài)實現(xiàn)表格添加和刪除操作

更新時間：2021年04月22日 10:27:05 作者：Distance-X

這篇文章主要為大家詳細(xì)介紹了js動態(tài)實現(xiàn)表格添加和刪除操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js動態(tài)實現(xiàn)表格添加和刪除的具體代碼，供大家參考，具體內(nèi)容如下

運行效果如圖（兩種實現(xiàn)方案，被注釋的是第一種實現(xiàn)方案）

代碼：

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <style type="text/css">
  
  div{
   text-align:center;
   box-sizing: border-box;
   width:100%;
  }
  #div1{
   
   margin-left: 300px;
   width: 800px;
   margin-top: 50px;
  }
  #div2{
   
   margin-left: 300px;
   width: 800px;
   padding-top:50px;
  }
  #table_id{
    width: 580px;
   }
 </style>
 

 <body>
  <div id="div0">
   <div id="div1">
   <input type="text" id="userid"  placeholder="請輸入編號" />
   <input type="text" id="username"  placeholder="請輸入姓名" />
   <input type="text" id="gender"  placeholder="請輸入性別" />
   <input type="button" value="添加" id="add"/>
  </div>
  
  <div id="div2">
   <table border="1px" align="center" id="table_id">
    <caption style="font: '微軟雅黑';font-size:20px;">學(xué)生信息表</caption>
    <tr>
     <th>編號</th>
     <th>姓名</th>
     <th>性別</th>
     <th>操作</th>
    </tr>
    <tr>
     <td>1</td>
     <td>令狐沖</td>
     <td>張無忌</td>
     <td><input type="button" value="刪除" style="color: blue;" onclick="delTr(this)"/></td>
    </tr>
    <tr>
     <td>1</td>
     <td>令狐沖</td>
     <td>張無忌</td>
     <td><input type="button" value="刪除" style="color: blue;" onclick="delTr(this)" /></td>
    </tr>
    <tr>
     <td>1</td>
     <td>令狐沖</td>
     <td>張無忌</td>
     <td><input type="button" value="刪除"style="color: blue;" onclick="delTr(this)"/></td>
    </tr>
   </table>
  </div>
  </div>
 </body>
 <script type="text/javascript">
  // 當(dāng)點擊添加按鈕時觸發(fā)下面的方法
     document.getElementById("add").onclick=function(){
   // 獲取每個文本框中的內(nèi)容
   var id = document.getElementById("userid").value;
   var name = document.getElementById("username").value;
   var gender = document.getElementById("gender").value;
   
  /* // 添加id
   var td_id = document.createElement("td");
   var text_id = document.createTextNode(id);
   td_id.appendChild(text_id);
  
   
   // 添加username
   var td_username = document.createElement("td");
   var text_username = document.createTextNode(name);
   td_username.appendChild(text_username);
     
   // 添加gender
   var td_gender = document.createElement("td");
   var text_gender = document.createTextNode(gender);
   td_gender.appendChild(text_gender);
   
   // 添加按鈕
   var td_button = document.createElement("td");
   var ele_input = document.createElement("input");
   ele_input.setAttribute("type","button");
   ele_input.setAttribute("value","刪除");
   ele_input.setAttribute("onclick","delTr(this)");
   ele_input.style.color="blue"; 
   td_button.appendChild(ele_input);
   
   var ele_tr = document.createElement("tr");
      ele_tr.appendChild(td_id);
   ele_tr.appendChild(td_username);
   ele_tr.appendChild(td_gender);
   ele_tr.appendChild(td_button);
   var ele_table =  document.getElementsByTagName("table")[0];
   
   ele_table.appendChild(ele_tr);*/
   
   
   //  使用innerHtml的方法動態(tài)添加表格
   var  tab = document.getElementsByTagName("table")[0];
   tab.innerHTML+="<tr>\n"+
    "<td>"+id+"</td>\n"+
    "<td>"+name+"</td>"+
    "<td>"+gender+"</td>"+
    "<td><input type='button' value='刪除' onclick='delTr(this)' style='color:blue'/></td>"+
    "</tr>"
  }
  
  
       
   function delTr(obj){
    
    var table =  obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;
    table.removeChild(tr);   
   }
 </script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: