昨天一个js面试公司出的题目,因为时间紧急我当时没有做出来,拿出来和大家分享一下, 我是楼主:刚才忘记说了一个要求,就是点击删除的话,则要删除当前div元素 解决方案 » 免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货 函数必须是function moveDiv(num)？？需不需要加全局变量？？那我怎么知道点的是那个？ <html> <head> <style> .container div{width:300px;height:25px;margin:5px;border:1px solid #000000; } </style> </head> <script> function moveDiv(obj, num) { var par = obj.parentNode, parr = par.parentNode, ds = parr.getElementsByTagName('div'), par_p, par_n; if(num==0) return parr.removeChild(par); for(var i=0; i<ds.length-1; i++) if(ds[i] == par){ par_p = ds[i-1] || null; par_n = ds[i+2] || null; } switch(num){ case -1: par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[ds.length-1]); break; case 1: par_n ? parr.insertBefore(par, par_n) : parr.insertBefore(par, ds[0]); break; } } </script> <body> <div class="container" id="par"> <div>第一行<input type='button' onclick="moveDiv(this, -1)" value="上移"/><input type='button' onclick="moveDiv(this, 1)" value="下移"/><input type='button' onclick="moveDiv(this, 0)" value="删除"/></div> <div>第二行<input type='button' onclick="moveDiv(this, -1)" value="上移"/><input type='button' onclick="moveDiv(this, 1)" value="下移"/><input type='button' onclick="moveDiv(this, 0)" value="删除"/></div> <div>第三行<input type='button' onclick="moveDiv(this, -1)" value="上移"/><input type='button' onclick="moveDiv(this, 1)" value="下移"/><input type='button' onclick="moveDiv(this, 0)" value="删除"/></div> <div bottom='1'>底部</div> </div> </body></html> 练练手，楼下继续。<html> <head> <style> .container div{width:300px;height:25px;margin:5px;border:1px solid #000000; } </style> </head> <script> function moveDiv(num) { var html= new Array() html[0]="<div>"+document.getElementsByTagName("div")[1].innerHTML+"</div>" html[1]="<div>"+document.getElementsByTagName("div")[2].innerHTML+"</div>" html[2]="<div>"+document.getElementsByTagName("div")[3].innerHTML+"</div>" html[3]="<div>"+document.getElementsByTagName("div")[4].innerHTML+"</div>" if(num==-1) { document.getElementsByTagName("div")[0].innerHTML=html[1]+html[2]+html[0]+html[3] return; } if(num==1) { document.getElementsByTagName("div")[0].innerHTML=html[2]+html[0]+html[1]+html[3] return; } if(num==0) { document.getElementsByTagName("div")[0].removeChild(event.srcElement.parentNode) } } </script> <body> <div class="container"> <div>第一行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div>第二行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div>第三行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div bottom='1'>底部</div> </div> </body></html> 顶了，好厉害啊！！＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝个人网站http://www.mysharespace.cn请多关照！！ 3楼的不错,实际应用也应该这样.不过问题是出题人已经定好了这样调用'onclick="moveDiv(-1)"',不传this的.而且div也没有id.我想出题人想考dom在ie/ff下的兼容吧 //for IE only!!!function moveDiv(num) { var obj = event.srcElement; switch(num) { case -1: if(obj.previousSibling) { obj.swapNode(obj.previousSibling); } else { while(obj.nextSibling.bottom != "1") { obj.swapNode(obj.nextSibling); } } break; case 1: if(obj.nextSibling.bottom != "1") { obj.swapNode(obj.nextSibling); } else { while(obj.previousSibling) { obj.swapNode(obj.previousSibling); } } break; case 0: obj.outerHTML = ""; break; }}第一版,应该还能优化~ 上面手误..方法第一行应该是var obj = event.srcElement.parentNode; 你的方法非常的好,想问一下如果,此时为第一个子元素的话这一句: par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[ds.length-1]);为什么不会插入两个完全一样的节点呢?不能理解.也就说,您为什么在移动节点的时候,没有删除原来的节点啊?这样不会有重复的节点吗?我不能理解,请解释一下 FF在这情况下用什么来实现event.srcElement呢？学习... 引用 3 楼 cgisir 的回复:HTML code <html> <head> <style> .container div{width:300px;height:25px;margin:5px;border:1px solid #000000; } </style> </head> <script> function moveDiv(obj, num) { var par = obj.parentNode, parr = par.parentNode, ds = parr.getElementsByTagName('div'), par_p, par_n; if(num==0) return parr.remov… 你的方法非常的好,想问一下如果,此时为第一个子元素的话这一句: par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[ds.length-1]); 为什么不会插入两个完全一样的节点呢?不能理解. 也就说,您为什么在移动节点的时候,没有删除原来的节点啊?这样不会有重复的节点吗? 我不能理解,请解释一下 FF需要将event作为参数传给方法,然后用event.target 没复制等于是移动另:ID是我开始考虑的时候加的, 后来那个思路没用, 又加了this按原代码不用this传值也行, 不过执行效率会受影响按原版这样可以<html> <head> <style> .container div{width:300px;height:25px;margin:5px;border:1px solid #000000; } </style> </head> <script> function moveDiv(num) { var e = moveDiv.caller.arguments[0] || window.event, obj = e.srcElement || e.target; var par = obj.parentNode, parr = par.parentNode; if(num==0) return parr.removeChild(par); var ds = parr.getElementsByTagName('div'), dl = ds.length-1, par_p, par_n; for(var i=0; i<ds.length-1; i++) if(ds[i] == par){ par_p = i-1>=0 ? ds[i-1] : null; par_n = i+2<dl ? ds[i+2] : null; } switch(num){ case -1: par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[dl]); break; case 1: par_n ? parr.insertBefore(par, par_n) : parr.insertBefore(par, ds[0]); break; } } </script> <body> <div class="container"> <div>第一行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div>第二行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div>第三行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div bottom='1'>底部</div> </div> </body></html> 上面下移有BUG这样<html> <head> <style> .container div{width:300px;height:25px;margin:5px;border:1px solid #000000; } </style> </head> <script> function moveDiv(num) { var e = moveDiv.caller.arguments[0] || window.event, obj = e.srcElement || e.target; var par = obj.parentNode, parr = par.parentNode; if(num==0) return parr.removeChild(par); var ds = parr.getElementsByTagName('div'), dl = ds.length-1, par_p, par_n; for(var i=0; i<ds.length-1; i++) if(ds[i] == par){ par_p = i-1>=0 ? ds[i-1] : null; par_n = i+2<=dl ? ds[i+2] : null; } switch(num){ case -1: par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[dl]); break; case 1: par_n ? parr.insertBefore(par, par_n) : parr.insertBefore(par, ds[0]); break; } } </script> <body> <div class="container"> <div>第一行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div>第二行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div>第三行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div bottom='1'>底部</div> </div> </body></html> 没根据num判断是上移下移,自己判断一下吧,下面的,只要做了上移,删除,用父对象移除当前对象就行了<script> function moveDiv(num) { var curDiv=event.srcElement.parentElement; var rootDiv= curDiv.parentElement if(rootDiv.firstChild==curDiv) { curDiv.swapNode(rootDiv.lastChild.previousSibling); } else { curDiv.swapNode(curDiv.previousSibling); } } </script> var e = moveDiv.caller.arguments[0] || window.event, obj = e.srcElement || e.target;var par = obj.parentNode, parr = par.parentNode;if(num==0) return parr.removeChild(par);var e = moveDiv.caller.arguments[0] || window.event, obj = e.srcElement || e.target; var par = obj.parentNode, parr = par.parentNode; 什么意思 看不明白...讲讲 奇怪了，我先前试明明moveDiv.caller.arguments[0]明明是undefined…… 完善下这里应该break一下, 忘了 if(ds[i] == par){ par_p = i-1>=0 ? ds[i-1] : null; par_n = i+2<=dl ? ds[i+2] : null; break; }<html> <head> <style> .container div{width:300px;height:25px;margin:5px;border:1px solid #000000; } </style> </head> <script> function moveDiv(num) { var e = moveDiv.caller.arguments[0] || window.event, obj = e.srcElement || e.target; var par = obj.parentNode, parr = par.parentNode; if(num==0) return parr.removeChild(par); var ds = parr.getElementsByTagName('div'), dl = ds.length-1, par_p, par_n; for(var i=0; i<ds.length-1; i++) if(ds[i] == par){ par_p = i-1>=0 ? ds[i-1] : null; par_n = i+2<=dl ? ds[i+2] : null; break; } switch(num){ case -1: par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[dl]); break; case 1: par_n ? parr.insertBefore(par, par_n) : parr.insertBefore(par, ds[0]); break; } } </script> <body> <div class="container"> <div>第一行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div>第二行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div>第三行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div> <div bottom='1'>底部</div> </div> </body></html> tomcat7.0+mysql5.0每天第一次连接总是出现错误 [求助]JAVASCRIPT抓取当前目录下的图片 javascript中如何做到双击某张图片让其在新窗口中显示？ 急求类似于 浏览器 菜单栏 那样的脚本 ！！！！！！帮忙！！ 查询功能 请问如何用javascript做横向下拉菜单? 关闭父窗口 但不想出现提示 网页求救: three.js 导入模型怎么变水平，哪里的问题，求解答 Jquery Webcam拍照问题 请问一下,这样在后台加载图片到底有没有效果啊?大家出来评论一下吧. 写了个简单的ie拖放,不能释放,请大家看一下
需不需要加全局变量？？
那我怎么知道点的是那个？
<head>
<style>
.container div{width:300px;height:25px;margin:5px;border:1px solid #000000; }
</style>
</head>
<script>
function moveDiv(obj, num)
{
var par = obj.parentNode, parr = par.parentNode, ds = parr.getElementsByTagName('div'), par_p, par_n;
if(num==0) return parr.removeChild(par); for(var i=0; i<ds.length-1; i++)
if(ds[i] == par){
par_p = ds[i-1] || null;
par_n = ds[i+2] || null;
}
switch(num){
case -1:
par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[ds.length-1]);
break;
case 1:
par_n ? parr.insertBefore(par, par_n) : parr.insertBefore(par, ds[0]);
break;
} }
</script>
<body>
<div class="container" id="par">
<div>第一行<input type='button' onclick="moveDiv(this, -1)" value="上移"/><input type='button' onclick="moveDiv(this, 1)" value="下移"/><input type='button' onclick="moveDiv(this, 0)" value="删除"/></div>
<div>第二行<input type='button' onclick="moveDiv(this, -1)" value="上移"/><input type='button' onclick="moveDiv(this, 1)" value="下移"/><input type='button' onclick="moveDiv(this, 0)" value="删除"/></div>
<div>第三行<input type='button' onclick="moveDiv(this, -1)" value="上移"/><input type='button' onclick="moveDiv(this, 1)" value="下移"/><input type='button' onclick="moveDiv(this, 0)" value="删除"/></div>
<div bottom='1'>底部</div>
</div>
</body>
</html>
<html>
<head>
<style>
.container div{width:300px;height:25px;margin:5px;border:1px solid #000000; }
</style>
</head>
<script>
function moveDiv(num)
{
var html= new Array()
html[0]="<div>"+document.getElementsByTagName("div")[1].innerHTML+"</div>"
html[1]="<div>"+document.getElementsByTagName("div")[2].innerHTML+"</div>"
html[2]="<div>"+document.getElementsByTagName("div")[3].innerHTML+"</div>"
html[3]="<div>"+document.getElementsByTagName("div")[4].innerHTML+"</div>"
if(num==-1)
{
document.getElementsByTagName("div")[0].innerHTML=html[1]+html[2]+html[0]+html[3]
return;
}
if(num==1)
{
document.getElementsByTagName("div")[0].innerHTML=html[2]+html[0]+html[1]+html[3]
return;
}
if(num==0)
{
document.getElementsByTagName("div")[0].removeChild(event.srcElement.parentNode)
}
}
</script>
<body>
<div class="container">
<div>第一行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div>第二行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div>第三行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div bottom='1'>底部</div>
</div>
</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
个人网站
http://www.mysharespace.cn
请多关照！！
不过问题是出题人已经定好了这样调用'onclick="moveDiv(-1)"',不传this的.而且div也没有id.我想出题人想考dom在ie/ff下的兼容吧
//for IE only!!!
function moveDiv(num) {
var obj = event.srcElement;
switch(num) {
case -1:
if(obj.previousSibling) {
obj.swapNode(obj.previousSibling);
} else {
while(obj.nextSibling.bottom != "1") {
obj.swapNode(obj.nextSibling);
}
}
break;
case 1:
if(obj.nextSibling.bottom != "1") {
obj.swapNode(obj.nextSibling);
} else {
while(obj.previousSibling) {
obj.swapNode(obj.previousSibling);
}
}
break;
case 0:
obj.outerHTML = "";
break;
}
}
第一版,应该还能优化~
方法第一行应该是
var obj = event.srcElement.parentNode;
你的方法非常的好,想问一下如果,此时为第一个子元素的话这一句:
par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[ds.length-1]);
为什么不会插入两个完全一样的节点呢?不能理解.也就说,您为什么在移动节点的时候,没有删除原来的节点啊?这样不会有重复的节点吗?
我不能理解,请解释一下
学习...
HTML code <html>
<head>
<style>
.container div{width:300px;height:25px;margin:5px;border:1px solid #000000; }
</style>
</head>
<script>
function moveDiv(obj, num)
{
var par = obj.parentNode, parr = par.parentNode, ds = parr.getElementsByTagName('div'), par_p, par_n;
if(num==0) return parr.remov…
你的方法非常的好,想问一下如果,此时为第一个子元素的话这一句:
par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[ds.length-1]);
为什么不会插入两个完全一样的节点呢?不能理解. 也就说,您为什么在移动节点的时候,没有删除原来的节点啊?这样不会有重复的节点吗?
我不能理解,请解释一下
FF需要将event作为参数传给方法,然后用event.target
ID是我开始考虑的时候加的, 后来那个思路没用, 又加了this按原代码不用this传值也行, 不过执行效率会受影响
按原版这样可以<html>
<head>
<style>
.container div{width:300px;height:25px;margin:5px;border:1px solid #000000; }
</style>
</head>
<script>
function moveDiv(num)
{
var e = moveDiv.caller.arguments[0] || window.event, obj = e.srcElement || e.target;
var par = obj.parentNode, parr = par.parentNode;
if(num==0) return parr.removeChild(par); var ds = parr.getElementsByTagName('div'), dl = ds.length-1, par_p, par_n;
for(var i=0; i<ds.length-1; i++)
if(ds[i] == par){
par_p = i-1>=0 ? ds[i-1] : null;
par_n = i+2<dl ? ds[i+2] : null;
}
switch(num){
case -1:
par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[dl]);
break;
case 1:
par_n ? parr.insertBefore(par, par_n) : parr.insertBefore(par, ds[0]);
break;
} }
</script>
<body>
<div class="container">
<div>第一行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div>第二行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div>第三行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div bottom='1'>底部</div>
</div>
</body>
</html>
<html>
<head>
<style>
.container div{width:300px;height:25px;margin:5px;border:1px solid #000000; }
</style>
</head>
<script>
function moveDiv(num)
{
var e = moveDiv.caller.arguments[0] || window.event, obj = e.srcElement || e.target;
var par = obj.parentNode, parr = par.parentNode;
if(num==0) return parr.removeChild(par); var ds = parr.getElementsByTagName('div'), dl = ds.length-1, par_p, par_n;
for(var i=0; i<ds.length-1; i++)
if(ds[i] == par){
par_p = i-1>=0 ? ds[i-1] : null;
par_n = i+2<=dl ? ds[i+2] : null;
}
switch(num){
case -1:
par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[dl]);
break;
case 1:
par_n ? parr.insertBefore(par, par_n) : parr.insertBefore(par, ds[0]);
break;
} }
</script>
<body>
<div class="container">
<div>第一行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div>第二行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div>第三行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div bottom='1'>底部</div>
</div>
</body>
</html>
function moveDiv(num)
{
var curDiv=event.srcElement.parentElement;
var rootDiv= curDiv.parentElement
if(rootDiv.firstChild==curDiv)
{
curDiv.swapNode(rootDiv.lastChild.previousSibling);
}
else
{
curDiv.swapNode(curDiv.previousSibling);
}
}
</script>
var par = obj.parentNode, parr = par.parentNode;
if(num==0) return parr.removeChild(par);var e = moveDiv.caller.arguments[0] || window.event, obj = e.srcElement || e.target;
var par = obj.parentNode, parr = par.parentNode;
什么意思 看不明白...讲讲
奇怪了，我先前试明明moveDiv.caller.arguments[0]明明是undefined……
这里应该break一下, 忘了
if(ds[i] == par){
par_p = i-1>=0 ? ds[i-1] : null;
par_n = i+2<=dl ? ds[i+2] : null;
break;
}
<html>
<head>
<style>
.container div{width:300px;height:25px;margin:5px;border:1px solid #000000; }
</style>
</head>
<script>
function moveDiv(num)
{
var e = moveDiv.caller.arguments[0] || window.event, obj = e.srcElement || e.target;
var par = obj.parentNode, parr = par.parentNode;
if(num==0) return parr.removeChild(par); var ds = parr.getElementsByTagName('div'), dl = ds.length-1, par_p, par_n;
for(var i=0; i<ds.length-1; i++)
if(ds[i] == par){
par_p = i-1>=0 ? ds[i-1] : null;
par_n = i+2<=dl ? ds[i+2] : null;
break;
}
switch(num){
case -1:
par_p ? parr.insertBefore(par, par_p) : parr.insertBefore(par, ds[dl]);
break;
case 1:
par_n ? parr.insertBefore(par, par_n) : parr.insertBefore(par, ds[0]);
break;
} }
</script>
<body>
<div class="container">
<div>第一行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div>第二行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div>第三行<input type='button' onclick="moveDiv(-1)" value="上移"/><input type='button' onclick="moveDiv(1)" value="下移"/><input type='button' onclick="moveDiv(0)" value="删除"/></div>
<div bottom='1'>底部</div>
</div>
</body>
</html>