为嘛删除不了= =
大草兔_cc
2016-08-10 15:34
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
window.onload = function(){
var tr=document.getElementsByTagName("tr");
for(var i= 0;i<tr.length;i++)
{
bgcChange(tr[i]);
}
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
}
function bgcChange(obj)
{
obj.onmouseover=function(){
obj.style.backgroundColor="#f2f2f2";
}
obj.onmouseout=function(){
obj.style.backgroundColor="#fff";
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
var num=2;
function add(){
num++;
var tr=document.createElement("tr");
var xh=document.createElement("td");
var xm=document.createElement("td");
var del=document.createElement("td");
var tab=document.getElementById("table");
xh.innerHTML="xh00"+num;
xm.innerHTML="第"+num+"学生";
del.innerHTML="<a href='javascript:;' onclick='del()' >删除</a>";
tab.appendChild(tr);
tr.appendChild(xh);
tr.appendChild(xm);
tr.appendChild(del);
var tr = document.getElementsByTagName("tr");
for(var i= 0;i<tr.length;i++)
{
bgcChange(tr[i]);
}
}
// 创建删除函数
function del()
{
var aa=this.parentNode.parentNode;
aa.parentNode.removeChild(aa);
}
</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="del(this);">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="del(this);">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
1回答
-
- 水里有条鱼
- 2016-08-10 16:53:32
function del()
{
var aa=this.parentNode.parentNode;
aa.parentNode.removeChild(aa);
}
这里的this不能这样用，这个this现在代表的是window而不是<a>(下面有解释),如果要获取<a>应该设置形参把从head里传来的this(<a>)接住，然后得到<a>，像这样
function del(obj)
{
var aa=obj.parentNode.parentNode;
aa.parentNode.removeChild(aa);
}
下面有一些关于this的相关信息，复制过来的希望对你有用
表示对触发事件的DOM对象的引用
<div onclick="可以在里面使用this">division element</div>
onclick="function(this){}";onclick="function(){this..}"
脚本引擎生成了一个div实例对象的匿名成员方法，而onclick指向这个方法
2.在函数内使用this，表示引用当前window对象
<script language="javascript">
function a(){this..}
</script>
对于IE浏览器可以用this.event.srcElement来获取对当前DOM对象的引用，FF不行。这种方法如果在使用函数的时候new了一下，那么this将会表示函数a，而不是window对象.var b=new a(); var b=a();两者会产生不一样的结果，很神奇的this
3、用DHTML方式在事件处理函数中使用this关键字：
<script language="javascript">
var div = document.getElementById('elmtDiv');
div.onclick = function()
{
// 在此使用this
};
</script>
这里的this关键字指示的内容是div元素对象实例，在脚本中使用DHTML方式直接为div.onclick赋值一个EventHandler的方法，等于为div对象实例添加一个成员方法。这种方式和第一种方法的区别是，第一种方法是使用HTML方式，而这里是DHTML方式，后者脚本解析引擎不会再生成匿名方法。Jquery中的 $('div').click(function(){$(this)..});$(this)也就是这种用法。
4.类定义中使用this
function JSClass()
{
var myName = 'jsclass';
this.m_Name = 'JSClass';
}
JSClass.prototype.ToString = function()
{
alert(myName + ', ' + this.m_Name);
};
var jc = new JSClass();
jc.ToString();
这时this表示m_Name是JSClass的成员变量，var myName只能算是“构造函数”内的一个变量，外部肯定无法引用。
5.函数中的内部函数中使用this
function OuterFoo()
{
this.Name = 'Outer Name';
function InnerFoo()
{
var Name = 'Inner Name';
alert(Name + ', ' + this.Name);
}
return InnerFoo;
}
OuterFoo()();
OuterFoo()里面的this.Name表示window.Name，InnerFoo()里面的this.Name也表示window.Name
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题