Uncaught TypeError: Cannot read property 'parentNode' of undefined

二医少年 2014-11-06 08:20:47

本人新人，最近在学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>

...全文

2357 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_19587639 2017-03-17

打赏
举报

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

qq_19587639 2017-03-17

打赏
举报

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

二医少年 2014-11-06

打赏
举报

解决了，十分感谢二楼！

slwsss 2014-11-06

打赏
举报


<!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>