• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
问园会馆 显示全部楼层 发表于 2021-10-26 13:53:50 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js动态实现表格添加和删除的具体代码,供各人参考,具体内容如下
运行结果如图(两种实现方案,被表明的是第一种实现方案)

代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6. </head>
  7. <style type="text/css">
  8.   
  9.   div{
  10.    text-align:center;
  11.    box-sizing: border-box;
  12.    width:100%;
  13.   }
  14.   #div1{
  15.    
  16.    margin-left: 300px;
  17.    width: 800px;
  18.    margin-top: 50px;
  19.   }
  20.   #div2{
  21.    
  22.    margin-left: 300px;
  23.    width: 800px;
  24.    padding-top:50px;
  25.   }
  26.   #table_id{
  27.     width: 580px;
  28.    }
  29. </style>
  30. <body>
  31.   <div id="div0">
  32.    <div id="div1">
  33.    <input type="text" id="userid"  placeholder="请输入编号" />
  34.    <input type="text" id="username"  placeholder="请输入姓名" />
  35.    <input type="text" id="gender"  placeholder="请输入性别" />
  36.    <input type="button" value="添加" id="add"/>
  37.   </div>
  38.   
  39.   <div id="div2">
  40.    <table border="1px" align="center" id="table_id">
  41.     <caption style="font: '微软雅黑';font-size:20px;">学生信息表</caption>
  42.     <tr>
  43.      <th>编号</th>
  44.      <th>姓名</th>
  45.      <th>性别</th>
  46.      <th>操作</th>
  47.     </tr>
  48.     <tr>
  49.      <td>1</td>
  50.      <td>令狐冲</td>
  51.      <td>张无忌</td>
  52.      <td><input type="button" value="删除" style="color: blue;" onclick="delTr(this)"/></td>
  53.     </tr>
  54.     <tr>
  55.      <td>1</td>
  56.      <td>令狐冲</td>
  57.      <td>张无忌</td>
  58.      <td><input type="button" value="删除" style="color: blue;" onclick="delTr(this)" /></td>
  59.     </tr>
  60.     <tr>
  61.      <td>1</td>
  62.      <td>令狐冲</td>
  63.      <td>张无忌</td>
  64.      <td><input type="button" value="删除"style="color: blue;" onclick="delTr(this)"/></td>
  65.     </tr>
  66.    </table>
  67.   </div>
  68.   </div>
  69. </body>
  70. <script type="text/javascript">
  71.   // 当点击添加按钮时触发下面的方法
  72.      document.getElementById("add").onclick=function(){
  73.    // 获取每个文本框中的内容
  74.    var id = document.getElementById("userid").value;
  75.    var name = document.getElementById("username").value;
  76.    var gender = document.getElementById("gender").value;
  77.    
  78.   /* // 添加id
  79.    var td_id = document.createElement("td");
  80.    var text_id = document.createTextNode(id);
  81.    td_id.appendChild(text_id);
  82.   
  83.    
  84.    // 添加username
  85.    var td_username = document.createElement("td");
  86.    var text_username = document.createTextNode(name);
  87.    td_username.appendChild(text_username);
  88.      
  89.    // 添加gender
  90.    var td_gender = document.createElement("td");
  91.    var text_gender = document.createTextNode(gender);
  92.    td_gender.appendChild(text_gender);
  93.    
  94.    // 添加按钮
  95.    var td_button = document.createElement("td");
  96.    var ele_input = document.createElement("input");
  97.    ele_input.setAttribute("type","button");
  98.    ele_input.setAttribute("value","删除");
  99.    ele_input.setAttribute("onclick","delTr(this)");
  100.    ele_input.style.color="blue";
  101.    td_button.appendChild(ele_input);
  102.    
  103.    var ele_tr = document.createElement("tr");
  104.       ele_tr.appendChild(td_id);
  105.    ele_tr.appendChild(td_username);
  106.    ele_tr.appendChild(td_gender);
  107.    ele_tr.appendChild(td_button);
  108.    var ele_table =  document.getElementsByTagName("table")[0];
  109.    
  110.    ele_table.appendChild(ele_tr);*/
  111.    
  112.    
  113.    //  使用innerHtml的方法动态添加表格
  114.    var  tab = document.getElementsByTagName("table")[0];
  115.    tab.innerHTML+="<tr>\n"+
  116.     "<td>"+id+"</td>\n"+
  117.     "<td>"+name+"</td>"+
  118.     "<td>"+gender+"</td>"+
  119.     "<td><input type='button' value='删除' onclick='delTr(this)' style='color:blue'/></td>"+
  120.     "</tr>"
  121.   }
  122.   
  123.   
  124.       
  125.    function delTr(obj){
  126.    
  127.     var table =  obj.parentNode.parentNode.parentNode;
  128.     var tr = obj.parentNode.parentNode;
  129.     table.removeChild(tr);   
  130.    }
  131. </script>
  132. </html>
复制代码
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作