这段代码哪里错了为什么新添的元素删不了？

源自：9-22 编程练习

这段代码哪里错了为什么新添的元素删不了？

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

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

window.onload=function(){

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

for(var i=0;i<tr.length;i++){

tr[i].onmouseover=function(){this.style.backgroundColor=' #f2f2f2'};

tr[i].onmouseout=function(){this.style.backgroundColor='#fff'};

}

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

var num=2;

function add(){

num++;

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

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

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

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

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

var tx=document.createElement('input');

var ta=document.createElement('a');

tx.type='text';

ta.innerHTML='删除';

ta.href='javascript:;'

ta.onclick='del(this)'; 这里修改成ta.setAttribute("onclick","del(this)”)为什么就没问题了？

if(num<10){ntd1.innerHTML='xh00'+num;}

else if(num>=10&&num<100){ntd1.innerHTML='xh0'+num;}

else{ntd1.innerHTML='xh'+num;}

ntd2.appendChild(tx);

ntd3.appendChild(ta);

ntr.appendChild(ntd1);

ntr.appendChild(ntd2);

ntr.appendChild(ntd3);

table.appendChild(ntr);

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

for(var i=0;i<tr.length;i++){

tr[i].onmouseover=function(){this.style.backgroundColor=' #f2f2f2'};

tr[i].onmouseout=function(){this.style.backgroundColor='#fff'};

}

// 创建删除函数