怎么删除这一行表单?就是function dele()里面一直提示errornotfound

来源:9-14 删除节点removeChild()

滢芷

2016-11-18 00:19

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript"> 
  
      window.onload = function(){
         
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        
      this.count=2;
     var tb=document.getElementById('table');
   
   }
     
      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
     function add(){
      var ino=document.getElementById('ino');
      ino.style.display='block';
      console.log('ok');
    }
    function submit(){

      this.count++;

      var num=document.getElementById('number').value;
      var nam=document.getElementById('name').value;
      var gra=document.getElementById('grade').value;

      var tb=document.getElementById('table');
      var newtable=document.createElement('tr');

      var tnum=document.createElement('td');
      tnum.innerHTML=num;
      var tnam=document.createElement('td');
      tnam.innerHTML=nam;
      var tgra=document.createElement('td');
      tgra.innerHTML=gra;

      var del=document.createElement('td');
      var ahref=document.createElement('a');
      ahref.innerHTML='delete';
      ahref.href="javascript:dele(count)";
      ahref.name='delete_table';
      del.appendChild(ahref);

      newtable.appendChild(tnum);
      newtable.appendChild(tnam);
      newtable.appendChild(tgra);
      newtable.appendChild(del);

      tb.appendChild(newtable);

      ino.style.display='none';

    }

    function clear1(){
      ino.style.display='none';
    }
        
    function dele(x){
      var dels=document.getElementsByName('delete_table');
      //console.log(dels);
      var tables1=document.getElementsByTagName('tr');
      console.log(tables1[x]);

      var tb=document.getElementById('table');
      //console.log(tb);
      
      tb.removeChild(tables1[x]);
      
      
      //console.log(tables[x]);
    }
     
     // 创建删除函数
     
     


  </script> 

  <style type="text/css">
    .in{
      display: none;
    }

  </style>
 </head> 
 <body> 
     <table border="1" width="50%" id="table">
     <tr>
    <th>number</th>
    <th>name</th>
    <th>grade</th>
    <th>opration</th>
     </tr>  

     <tr>
    <td>xh001</td>
    <td>ming</td>
    <td>100</td>
    <td><a name='delete_table' href='javascript:dele(1)' >delete</a></td>   <!--在删除按钮上添加点击事件  -->
     </tr>

     <tr>
    <td>xh002</td>
    <td>fang</td>
    <td>99</td>
    <td><a name='delete_table' href="javascript:dele(2)" >delete</a></td>   <!--在删除按钮上添加点击事件  -->
     </tr>  

     </table>
     <input type="button" value="add"  onclick='javascript:add()'/>   <!--在添加按钮上添加点击事件  -->

     <!--in div:-->
     <div id='ino' class='in'>
        student number:`<input type="text" id='number'/><br>
        student name:<input type="text" id='name'/><br>
        student grade:<input type="text" id='grade'/><br>
        <input type="button" id='cl' value='clear' onclick='javascript:clear1()'/>
        <input type="button" id='sub' value='submit' onclick='javascript:submit()'/><br>
     </div>
 </body>
</html>


写回答 关注

1回答

  • stone310
    2016-11-18 07:55:25
    已采纳
      var tb=document.getElementById('table').children[0]

    因为table下面必定会有tbody,即使你没写


    滢芷

    非常感谢!

    2016-11-18 18:18:26

    共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题