用javascript实现上下两行换位效果
我是在相片排序中有需要用到未经过DB就实现相片上移，下移，为了让用户体验(其实质效果就如这个javaEye blog中的分类管理的上移下移一样，不过这里是每次都有经过DB了！！)，所以才想着用javascript去实现它的页面效果，而最后才真正通过一个button将排序结果存入DB，重新loading page。//整个div里面的内容上移function upHtml(val){ //这里val是传过来的一个int型值var replace_index = val - 1;var div_html = document.getElementById('div'+val).innerHTML;var replace_div_html = document.getElementById('div'+replace_index).innerHTML;//change the two innerHTMLvar save_div = replace_div_html;document.getElementById('div'+replace_index).innerHTML = div_html;document.getElementById('div'+val).innerHTML = save_div;}//整个div里面的内容下移function downHtml(val){ //这里val是传过来的一个int型值var replace_index = val + 1;var div_html = document.getElementById('div'+val).innerHTML;var replace_div_html = document.getElementById('div'+replace_index).innerHTML;//change the two innerHTMLvar save_div = replace_div_html;document.getElementById('div'+replace_index).innerHTML = div_html;document.getElementById('div'+val).innerHTML = save_div;} 从这js可以看出，以上上移和下移的效果实际上我是通过更换它们的html源文件来实现滴！下面请看下对应上面js的简单的html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY><divid="div1"> <IMG width="90" height="80" src="http://t2.baidu.com/it/u=1064298196,2068260633&fm=0&gp=16.jpg" border=0> <a href="#" >down </a></div><divid="div2"> <IMG width="90" height="80" src="http://t2.baidu.com/it/u=1064298196,2068260633&fm=0&gp=16.jpg" border=0> <a href="#" >up </a> <a href="#" >down </a></div><divid="div3"> <IMG width="90" height="80" src="http://t2.baidu.com/it/u=1064298196,2068260633&fm=0&gp=16.jpg" border=0> <a href="#" >up </a> </div></BODY></HTML> 由于需求是对所有的相片排序时，对每个相片的上移和下移开始时不重新loading页面，而又要示让用户看到效果，当所有的相片排序ok之后，才通过action将排序结果更新到DB，重新loadin。哎！可是花费了我好多时间才想到替换html源文件的方法！嗯哼！也算是自己的劳动成果吧，在此记录下来！也希望能给其它人也带来一点点的帮助吧！
页:
[1]