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

JavaScript

JavaScript ASP.NET PHP编程正则表达式 AJAX相关 ASP编程 JSP编程编程10000问 CSS/HTML Flex 脚本加解密 web2.0 XML/RSS 网页编辑器相关技巧安全相关网页播放器 Dart Vue.js

上一篇: vue实现登录类型切换下一篇:js+Html实现表格可编辑操作

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

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了js动态实现表格添加和删除操作，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

@H_406_15@ 您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的js动态实现表格添加和删除操作全部内容，希望文章能够帮你解决js动态实现表格添加和删除操作所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: vue实现登录类型切换下一篇:js+Html实现表格可编辑操作

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16