下面的程序总是出现两个edit | delete 的显示,为什么?可是我只想要每行左边对应的那个,请问怎么修改?
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body bgcolor="#FFFFFF" text="#000000">
<script>var overCol="#f1f1f1"
var currentDiv;function showDelete(self){
self.style.backgroundColor = overCol;
currentDiv = self;
var theid = "del_icon"; var delDiv=document.createElement("div");
delDiv.id=theid;
var d=delDiv;
d.style.textAlign="center";d.style.fontSize="11px";
var edit = document.createElement("span");
edit.title="编辑此条";edit.style.textDecoration="underline";
var del = document.createElement("span");
del.title="删除此条";del.style.textDecoration="underline";
edit.appendChild(document.createTextNode("edit"));
d.appendChild(edit);
d.appendChild(document.createTextNode(" | "));
del.appendChild(document.createTextNode("delete"));
d.appendChild(del); d.style.width="80px";
d.style.lineHeight="20px";
d.style.color="blue"; document.body.appendChild(d); document.getElementById(theid).style.cursor="pointer"; var l= getAbsoluteLeft(self) + self.offsetWidth - 80;
var t= getAbsoluteTop(self) + 5;
var scrollT = self.parentNode.scrollTop;//减去出现滚动条的高度;
var t= getAbsoluteTop(self) + 5 - scrollT;
document.getElementById(theid).style.position="absolute";
document.getElementById(theid).style.left = l+"px";
document.getElementById(theid).style.top = t+"px";
}function getAbsoluteLeft( ob ){
if(!ob){return null;}
var obj = ob;
var objLeft = obj .offsetLeft;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
objLeft += obj .offsetParent.offsetLeft;
obj = obj .offsetParent;
}
return objLeft ;
}
function getAbsoluteTop( ob ){
if(!ob){return null;}
var obj = ob;
var objTop = obj .offsetTop;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
objTop += obj .offsetParent.offsetTop;
obj = obj .offsetParent;
}
return objTop ;
}
</script>
<div id="list">
<div onMouseOver="showDelete(this);" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" >example1.com </div>
<div onMouseOver="showDelete(this);" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" >example2.com </div>
</div>
</body>
</html>
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body bgcolor="#FFFFFF" text="#000000">
<script>var overCol="#f1f1f1"
var currentDiv;function showDelete(self){
self.style.backgroundColor = overCol;
currentDiv = self;
var theid = "del_icon"; var delDiv=document.createElement("div");
delDiv.id=theid;
var d=delDiv;
d.style.textAlign="center";d.style.fontSize="11px";
var edit = document.createElement("span");
edit.title="编辑此条";edit.style.textDecoration="underline";
var del = document.createElement("span");
del.title="删除此条";del.style.textDecoration="underline";
edit.appendChild(document.createTextNode("edit"));
d.appendChild(edit);
d.appendChild(document.createTextNode(" | "));
del.appendChild(document.createTextNode("delete"));
d.appendChild(del); d.style.width="80px";
d.style.lineHeight="20px";
d.style.color="blue"; document.body.appendChild(d); document.getElementById(theid).style.cursor="pointer"; var l= getAbsoluteLeft(self) + self.offsetWidth - 80;
var t= getAbsoluteTop(self) + 5;
var scrollT = self.parentNode.scrollTop;//减去出现滚动条的高度;
var t= getAbsoluteTop(self) + 5 - scrollT;
document.getElementById(theid).style.position="absolute";
document.getElementById(theid).style.left = l+"px";
document.getElementById(theid).style.top = t+"px";
}function getAbsoluteLeft( ob ){
if(!ob){return null;}
var obj = ob;
var objLeft = obj .offsetLeft;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
objLeft += obj .offsetParent.offsetLeft;
obj = obj .offsetParent;
}
return objLeft ;
}
function getAbsoluteTop( ob ){
if(!ob){return null;}
var obj = ob;
var objTop = obj .offsetTop;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
objTop += obj .offsetParent.offsetTop;
obj = obj .offsetParent;
}
return objTop ;
}
</script>
<div id="list">
<div onMouseOver="showDelete(this);" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" >example1.com </div>
<div onMouseOver="showDelete(this);" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" >example2.com </div>
</div>
</body>
</html>
解决方案 »
- 简单的 javascript 正则表达式匹配
- [#前端技术分享#]深入理解Javascript之执行上下文(Execution Context)
- JS嵌套问题(大哥们帮我呀!)
- 难题:如何在一个网页里随机查看后台500个图片中的指定一个?(方法1求解)
- 现在写js效果要特别熟悉css,怎么学css,麻烦各位给些好教材?
- 关于Javascript编码转换的一个紧急问题
- 如何用javascript创建一个style元素。
- 为什么document.write()出来的函数会自动执行?
- (100分),刚学习的js,挺麻烦的!!半小时后结贴,多谢!
- 有谁有比较好的能模仿组合框的select控件??
- .........服务器上多出文件来了......有什么用这些文件....
- JS的一个QQ菜单,功能基本实现,现在存在的问题,请高手指点
JS中添加一个方法:
function del()
{
var del = document.getElementById("del_icon");
del.parentElement.removeChild(del);
}然后添加onMouseOut方法:
<div id="list">
<div onMouseOver="showDelete(this);" onMouseOut="del();" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" >example1.com </div>
<div onMouseOver="showDelete(this);" onMouseOut="del();" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" >example2.com </div>
</div>