为什么我的删除会报错呢?

来源:9-22 编程练习

慕尼黑7231240

2020-03-23 16:10

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

<meta charset="utf-8"> 

  <script type="text/javascript"> 

      window.onload = function(){

        Highlight();}        

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

  function addOne(obj){

      var tbody=document.getElementById("table").lastChild;

      var tr=document.createElement("tr");

      var td=document.createElement("td");

      td.innerHTML="<input type='text'/>";

      tr.appendChild(td);

      var td=document.createElement("td");

      td.innerHTML="<input type='text'/>";

      tr.appendChild(td);

      var td=document.createElement("td");

      td.innerHTML="<a href='javascript:;' onclick='deleteRow(this)'删除</a>";

      tr.appendChild(td);

      tbody.appendChild(tr);

      Highlight();

      

  } 

  

function deleRow(obj){

    var tbody=document.getElementById("table").lastChild;

    var tr=obj.parentNode.parentNode;

    tbody.removeChild(tr);

}

function Highlight(){

  var tbody=document. getElementById("table").lastChild;

  trs=tbody.getElementsByTagName("tr");

  for(var i =1;i<trs.length;i++){

      trs[i].onmouseover = function(){

        this.style.backgroundColor ="#f2f2f2";

      } 

      trs[i].onmouseout = function(){

        this.style.backgroundColor ="#fff";}

}     

}

 

     

      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;

     

   

     

     // 创建删除函数

     



  </script> 

 </head> 

 <body> 

  <table border="1" width="50%" id="table">

  <tr>

<th>学号</th>

<th>姓名</th>

<th>操作</th>

  </tr>  


  <tr>

<td>xh001</td>

<td>王小明</td>

<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

  <input type="button" value="添加一行" onclick="addOne()" />   <!--在添加按钮上添加点击事件  -->

 </body>

</html>


写回答 关注

2回答

  • 走馬勿观花
    2020-03-23 22:05:54
    已采纳


    如图示:http://img.mukewang.com/5e78c2390001307a04750116.jpg

  • 慕尼黑7231240
    2020-03-24 11:18:23

    刚找到,谢谢

JavaScript进阶篇

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

468060 学习 · 21891 问题

查看课程

相似问题