请问一下，不能删除，帮忙解释并给予正确方法，谢谢！
DeepNet
2015-11-05 21:22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*tr:hover{background:#777;}*/
a{text-decoration:none;}
table,td{
border:1px solid goldenrod;
text-align:center;
}
th{
background-color:sandybrown;
}
table{
margin:15px 0;
width:500px;
height:150px;
}
th,td{
height:30px;
}
button{border:0 yellow none;height:35px;width:100px;font-size:14px;font-weight:bold;}
</style>
<script>
//鼠标滑入滑出事件，获取行
function tabl(){
var trline=document.getElementsByTagName("tr");
for (var i=1; i<trline.length;i++)
{
trline[i].onmouseover=function(){
//通过for循环遍历使每一个trline[i].onmouseover的都有这个function方法，
//this表示把style样式传递给function()，并赋值给trline[i].onmouseover;
this.style.backgroundColor="#f2f2f2";
}
trline[i].onmouseout=function() {
this.style.backgroundColor="#fff";
}
}
}
//添加行
// var itable=document.getElementsByTagName("table");
// 这里是数组，应该加入访问数组内的下标，如：[0]（表示读取第一个节点）或使用.lastChild（最后一个节点）
function addtr(){
var tablein=document.getElementById("table");
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var alink=document.createElement("a");
alink.setAttribute("href","javascript:deleteRow()");
alink.innerHTML="del";
newtd.appendChild(alink);
for (var x=1;x<5;x++){
newtr.appendChild(document.createElement("td"));
}; //添加 “4个” 空白单元格
newtr.appendChild(newtd); //添加以上的第5个 “alink链接与内容” 单元格
tablein.appendChild(newtr);
tabl();
}
//同样td方法,为每一个alink加入链接
var a_btn=document.getElementsByTagName("a");
for (var i=0;i<a_btn.length;i++){
a_btn[i].setAttribute("href","deleteRow(this)");
}
//删除行
function deleteRow(obj){
var getNode = document.getElementById('table');
var deltr = obj.parentNode.parentNode;
getNode.removeChild(deltr);
}
//删除对应
//全部删除
//删除指定
//删除选中
</script>
</head>
<body>
<!--<div>-->
<table id="table">
<tr>
<th>工号</th>
<th>姓名</th>
<th>职务</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>138</td>
<td>alex</td>
<<td>iway</td>
<td>12</td>
<td><a href="javascript:">del</a></td>
</tr>
<tr>
<td>4405</td>
<td>hong</td>
<<td>hr</td>
<td>12</td>
<td><a href="javascript:">del</a></td>
</tr>
<<tr>
<td>123</td>
<td>wang</td>
<td>it</td>
<td>12</td>
<td><a href="javascript:">del</a></td>
</tr>
</table>
<button onclick="javascript:addtr();">添加一行</button>
<!--</div>-->
</body>
</html>
4回答
-
- 李晓健
- 2015-11-05 21:50:54
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*tr:hover{background:#777;}*/ a{text-decoration:none;} table,td{ border:1px solid goldenrod; text-align:center; } th{ background-color:sandybrown; } table{ margin:15px 0; width:500px; height:150px; } th,td{ height:30px; } button{ border:0 yellow none;height:35px;width:100px;font-size:14px;font-weight:bold; } </style> </head> <body> <!--<div>--> <table id="table"> <tr> <th>工号</th> <th>姓名</th> <th>职务</th> <th>工资</th> <th>操作</th> </tr> <tr> <td>138</td> <td>alex</td> <<td>iway</td> <td>12</td> <td><a href="javascript:;">del</a></td> </tr> <tr> <td>4405</td> <td>hong</td> <<td>hr</td> <td>12</td> <td><a href="javascript:;">del</a></td> </tr> <<tr> <td>123</td> <td>wang</td> <td>it</td> <td>12</td> <td><a href="javascript:deleteRow(this)">del</a></td> </tr> </table> <button onclick="javascript:addtr();">添加一行</button> <!--</div>--> <script> //鼠标滑入滑出事件，获取行 function tabl(){ var trline=document.getElementsByTagName("tr"); for (var i=1; i<trline.length;i++) { trline[i].onmouseover=function(){ //通过for循环遍历使每一个trline[i].onmouseover的都有这个function方法， //this表示把style样式传递给function()，并赋值给trline[i].onmouseover; this.style.backgroundColor="#f2f2f2"; } trline[i].onmouseout=function() { this.style.backgroundColor="#fff"; } } } //添加行 // var itable=document.getElementsByTagName("table"); // 这里是数组，应该加入访问数组内的下标，如：[0]（表示读取第一个节点）或使用.lastChild（最后一个节点） function addtr(){ var tablein=document.getElementById("table"); var newtr=document.createElement("tr"); var newtd=document.createElement("td"); var alink=document.createElement("a"); alink.setAttribute("href","javascript:;"); alink.innerHTML="del"; alink.onclick = deleteRow; newtd.appendChild(alink); for (var x=1;x<5;x++){ newtr.appendChild(document.createElement("td")); }; //添加 “4个” 空白单元格 newtr.appendChild(newtd); //添加以上的第5个 “alink链接与内容” 单元格 tablein.appendChild(newtr); tabl(); } //同样td方法,为每一个alink加入链接 var a_btn=document.getElementsByTagName("a"); for (var i=0;i<a_btn.length;i++){ a_btn[i].setAttribute("href","javascript:;"); a_btn[i].onclick = deleteRow; } //删除行 function deleteRow(){ var deltr = this.parentNode.parentNode; deltr.parentNode.removeChild(deltr); } //删除对应 //全部删除 //删除指定 //删除选中 </script> </body> </html>主要两个问题，
1，你把javascript代码放到上面还没有用到onReady 或 onload事件，javascript代码会先执行，执行时html代码还没生成，所以那点点击的代码就无效了。
2 你用a的href 去执行方法 然后传入一个 this 参数进去，这样的话this并不是你点南的a标签 而是window对象。
-
- 李晓健
- 2015-11-06 09:03:53
a_btn[i].setAttribute("href","javascript:;");你这样伏就拿不到那个当前点击的a 标签了
a_btn[i].onclick = deleteRow;
这是不加（） 是因为这里只是对deleteRow的方法的引用，如果加() 就成了调用。
var deltr = this.parentNode.parentNode; deltr.parentNode.removeChild(deltr); a_btn[i].onclick = deleteRow;
这就是删除一个当前行呀，第一行是拿到行，第二行是从当前行的父节点中把它删除，直接从table中删除这个行会报错。第三行是给一个a添加一个点击事件。
-
- DeepNet
- 2015-11-05 23:30:42
var deltr = this.parentNode.parentNode;
deltr.parentNode.removeChild(deltr);
a_btn[i].onclick = deleteRow;
这三句表示什么意思？
-
- DeepNet
- 2015-11-05 23:13:12
var a_btn=document.getElementsByTagName("a");
for (var i=0;i<a_btn.length;i++){
a_btn[i].setAttribute("href","javascript:;"); //这里为什么不能使用a_btn[i].setAttribute("href","javascript:deleteRow();")
a_btn[i].onclick = deleteRow; //这里为什么不用加();
}
//删除行
function deleteRow(){
var deltr = this.parentNode.parentNode; // a 的父节点td的父节点tr
deltr.parentNode.removeChild(deltr); // tr 空白节点的父节点
}
请问我以上的注解说明是这样？
JavaScript进阶篇
468979 学习 · 22582 问题
相似问题