Uncaught TypeError: Cannot read property 'parentNode' of undefined

时间：2022-12-01 23:38:57
本人新人，最近在学javascript，使用chrome调试js时出现Uncaught TypeError: Cannot read property 'parentNode' of undefined，不知道如何解决，希望有人能帮忙，十分感谢·


<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript">
      window.onload = function(){
           var trs = document.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";
                }
          }
        }

     function addTo(){
           var table = document.getElementById('table');

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

           var td = document.createElement('td');
           td.innerHTML="<input type = 'text' />";
           tr.appendChild(td);

           td = document.createElement('td');
           td.innerHTML="<input type = 'text' />";
           tr.appendChild(td);

           td = document.createElement('td');
           td.innerHTML="<a href='javascript:deleteItem(this);'>删除</a>";
           tr.appendChild(td);

           table.appendChild(tr);
          }

      function deleteItem(obj){
            var table = document.getElementById('table');
             var tr = obj.parentNode.parentNode; //报错在这一行
            table.removeChild(tr);

      }
  </script>
 </head>
 <body>
     <table border="1" width="50%" id="table">
     <tr>
    <th>工号</th>
    <th>姓名</th>
    <th>选项</th>
     </tr>

    <tr>
    <td>01</td>
    <td>小明</td>
    <td><a href="javascript:deleteItem(this);" >删除</a></td>   
     </tr>

     <tr>
    <td>02</td>
    <td>小王</td>
    <td><a href="javascript:deleteItem(this);" >删除</a></td> 
     </tr>

     </table>
     <input type="button" value="添加一行"  onclick = "addTo();"/>   
 </body>
</html>

4 个解决方案

#1



<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <script type="text/javascript">

      window.onload = function(){

           var trs = document.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";

                }

          }

        }


     function addTo(){

           var table = document.getElementById('table');

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


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

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

           tr.appendChild(td);


           td = document.createElement('td');

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

           tr.appendChild(td);


           td = document.createElement('td');

           td.innerHTML="<a href='#' onclick='deleteItem(this);return false;'>删除</a>";

           tr.appendChild(td);


           table.appendChild(tr);

          }


      function deleteItem(obj){ 

obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);

      }

  </script>

 </head>

 <body>

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

     <tr>

    <th>工号</th>

    <th>姓名</th>

    <th>选项</th>

     </tr>


    <tr>

    <td>01</td>

    <td>小明</td>

    <td><a href='#' onclick='deleteItem(this);return false;' >删除</a></td>   

     </tr>


     <tr>

    <td>02</td>

    <td>小王</td>

    <td><a href='#' onclick='deleteItem(this);return false;' >删除</a></td> 

     </tr>


     </table>

     <input type="button" value="添加一行"  onclick = "addTo();"/>   

 </body>

</html>

#2

解决了，十分感谢二楼！

#3

居然遇到和我一样问题的人，做的练习都是一样的，从慕课网上找的吧

#4

噢，我知道了，是不是用的选取节点的js，格式开头必须也是节点类型，所以，问题出现在节点类型上，谢谢了

#1



<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <script type="text/javascript">

      window.onload = function(){

           var trs = document.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";

                }

          }

        }


     function addTo(){

           var table = document.getElementById('table');

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


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

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

           tr.appendChild(td);


           td = document.createElement('td');

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

           tr.appendChild(td);


           td = document.createElement('td');

           td.innerHTML="<a href='#' onclick='deleteItem(this);return false;'>删除</a>";

           tr.appendChild(td);


           table.appendChild(tr);

          }


      function deleteItem(obj){ 

obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);

      }

  </script>

 </head>

 <body>

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

     <tr>

    <th>工号</th>

    <th>姓名</th>

    <th>选项</th>

     </tr>


    <tr>

    <td>01</td>

    <td>小明</td>

    <td><a href='#' onclick='deleteItem(this);return false;' >删除</a></td>   

     </tr>


     <tr>

    <td>02</td>

    <td>小王</td>

    <td><a href='#' onclick='deleteItem(this);return false;' >删除</a></td> 

     </tr>


     </table>

     <input type="button" value="添加一行"  onclick = "addTo();"/>   

 </body>

</html>

#2

解决了，十分感谢二楼！

#3

居然遇到和我一样问题的人，做的练习都是一样的，从慕课网上找的吧

#4

噢，我知道了，是不是用的选取节点的js，格式开头必须也是节点类型，所以，问题出现在节点类型上，谢谢了
标签：

相关文章