• 技术文章 >web前端 >js教程

    javascript如何实现删除表格

    coldplay.xixicoldplay.xixi2021-04-08 15:30:43原创114

    javascript实现删除表格的方法:首先创建节点;然后移除table下面的子节点tr,删除表格的行,代码为【table.removeChild(this.parentNode.parentNode)】。

    本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑。

    javascript实现删除表格的方法:

    效果图:

    cf22f2f07a689f9f3ee79812fdc1da8.png

    代码如下:

    <!DOCTYPE html>
    <html>
     <head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
      #box{
      margin:0 auto;
      background:yellow;
      border:4px double #808080;
      width:600px;
      text-align:center;
      }
      #box input{
      width:130px;
      }
      #box table{
      margin:5px 0;
      background:lawngreen;
      }
     </style>
     <script type="text/javascript">
      onload = function(){
      var aInput = document.getElementsByTagName('input');
      var bTn = document.getElementById('btn');
      var table = document.getElementsByTagName('table')[0];
    //  
     
      //方法一
    //  bTn.onclick = function(){
    //   
    //   var oTr=document.createElement('tr');//创建节点
    //   table.appendChild(oTr);//创建table的子节点tr
     
    //   var oTd=document.createElement('td');//创建节点
    //   oTd.innerHTML=aInput[0].value;//给表格赋内容
    //   oTr.appendChild(oTd);//创建tr的子节点td
    //   
    //   var oTd=document.createElement('td');//创建节点
    //   oTd.innerHTML=aInput[1].value;//给表格赋内容
    //   oTr.appendChild(oTd);//创建tr的子节点td
    //   
    //   var oTd=document.createElement('td') ;//创建节点
    //   oTd.innerHTML=aInput[2].value;//给表格赋内容
    //   oTr.appendChild(oTd);//创建tr的子节点td
     
    //   var oTd=document.createElement('td') ;//创建节点
    //   oTd.innerHTML='<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';//给表格赋内容
    //   oTr.appendChild(oTd);//创建tr的子节点td
     
    //   oTd.getElementsByTagName('a')[0].onclick=function(){
    //   table.removeChild(this.parentNode.parentNode);
    //   //移除table下面的子节点tr
    //   }//删除表格行
     
      //方法二
      bTn.onclick = function(){
     
       var oTr=document.createElement('tr');//创建节点
       table.appendChild(oTr);//创建table的子节点tr
       for(var i = 0; i < aInput.length-1; i ++){
       var oTd=document.createElement('td');//创建节点
       oTd.innerHTML=aInput[i].value;//给表格赋内容
       oTr.appendChild(oTd);//创建tr的子节点td
       }
     
       var oTd=document.createElement('td') ;//创建节点
       oTd.innerHTML='<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';//给表格赋内容
       oTr.appendChild(oTd);//创建tr的子节点td
     
       oTd.getElementsByTagName('a')[0].onclick=function(){
       table.deleteRow(1);
       }
      }
      }  
     </script>
     </head>
     <body>
     <div id="box">
      ID:<input type="text" name="" id="" value="" />
      姓名:<input type="text" name="" id="" value="" />
      电话:<input type="text" name="" id="" value="" />
      <input type="button" name="btn" id="btn" value="保存" style="width:50px;"/>
      <table border="" cellspacing="" cellpadding="" width="600px" >
      <tr>
      <td>Id</td>
      <td>name</td>
      <td>tal</td>
      <td>操作</td>
      </tr>  
      </table>
     </div>
     
     </body>
    </html>

    相关免费学习推荐:javascript(视频)

    以上就是javascript如何实现删除表格的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 删除表格
    上一篇:javascript如何改变鼠标指针形状 下一篇:Javascript中添加事件到脚本被覆盖
    第15期线上培训班

    相关文章推荐

    • jQuery实现的简单动态添加、删除表格功能示例• javascript如何实现删除表格中勾选的行(代码)• 如何删除表格中所有的一样的字• html怎么删除表格的第二行

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网