js动态实现表格添加和删除操作

Z时代
2024-01-10
分类：IT

本文实例为大家分享了js动态实现表格添加和删除的具体代码，供大家参考，具体内容如下

运行效果如图（两种实现方案，被注释的是第一种实现方案）

代码：


<!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;">学生信息表</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">
  // 当点击添加按钮时触发下面的方法
     document.getElementById("add").onclick=function(){
   // 获取每个文本框中的内容
   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的方法动态添加表格
   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>