增加顶和底的功能,也不知道是否能实现……
下面的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>
&l