当前位置: 代码迷 >> JavaScript >> 增加顶和底的功能,也不知道是否能实现…解决方法
  详细解决方案

增加顶和底的功能,也不知道是否能实现…解决方法

热度:65   发布时间:2012-03-29 12:53:12.0
增加顶和底的功能,也不知道是否能实现……
下面的JS排序,我想:
增加顶和底的功能,也就是选择后,点一下顶,就到了第一个,不用一步步移动。
请问高手如何实现?这个太有用了。

<style > 
li{ 
list-style:none; 

</style > 
<script > 
function D(){ 
var radio = document.all.sel;  
  var ele = null; 
for(var i=0;i <radio.length;i++){  
  if(radio[i].checked) 
  ele = radio[i];  
  } 
ele.nextSibling.parentNode.swapNode(ele.nextSibling.parentNode.nextSibling) 
ele.checked=true; 

function A(){ 
var radio = document.all.sel;  
  var ele = null; 
for(var i=0;i <radio.length;i++){  
  if(radio[i].checked) 
  ele = radio[i];  
  } 
ele.nextSibling.parentNode.swapNode(ele.nextSibling.parentNode.previousSibling) 
ele.checked=true; 

</script > 
<input type="button" value="X" onClick="D()" > <input type="button" value="S" onClick="A()" > 
<div > 

<li > <input type="radio" name="sel" value="" > <input type="text" value="1" > </li > 
<li > <input type="radio" name="sel" value="" > <input type="text" value="2" > </li > 
<li > <input type="radio" name="sel" value="" > <input type="text" value="3" > </li > 
<li > <input type="radio" checked name="sel" value="" > <input type="text" value="4" > </li > 
<li > <input type="radio" name="sel" value="" > <input type="text" value="5" > </li > 
<li > <input type="radio" name="sel" value="" > <input type="text" value="6" > </li > 
<li > <input type="radio" name="sel" value="" > <input type="text" value="7" > </li > 
<li > <input type="radio" name="sel" value="" > <input type="text" value="8" > </li > 
</div > 

上面这个代码,能不能改进一下: 
增加顶和底的功能,也就是选择后,点一下顶,就到了第一个,不用一步步移动。 
不知道如何实现。也不知道是否能实现……谢谢高手们。

------解决方案--------------------
你可以这么考虑,如果当前节点(li)中的radio处于选中状态,则删除当前节点(li节点);
移动到顶部:在顶部新增前面删除的节点;
移动到底部:在底部新增前面删除的节点;
source code:

<input type="button" value="顶" onClick="top()"> 
<input type="button" value="底" onClick="bottom()">
<div>
<ul>
<li>
<input type="radio" name="sel" value=""> <input type="text" value="1">
</li>
<li>
<input type="radio" name="sel" value=""> <input type="text" value="2">
</li>
<li>
<input type="radio" name="sel" value=""> <input type="text" value="3">
</li>
<li>
<input type="radio" checked name="sel" value=""> <input type="text" value="4">
</li>
<li>
<input type="radio" name="sel" value=""> <input type="text" value="5">
  相关解决方案