读书人

增加顶和底的功能也不知道是否能实现

发布时间: 2012-03-29 12:53:12 作者: rapoo

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


</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>
</ul>
</div>

function top()
{
//debugger
var radio = document.all.sel;
var ele = null;
for(var i=0;i <radio.length;i++)
{
if(radio[i].checked)
ele = radio[i];
}
var anchor=ele.parentNode;//指向li节点
var parent=anchor.parentNode;//指向ul节点
var removedChild=parent.removeChild(anchor); //指向当前删除的节点
var insertNodeBefore=parent.firstChild; //指向插入在哪个兄弟节点之前
parent.insertBefore(removedChild,insertNodeBefore); //插入节点
ele.checked=true;
}

function bottom()
{
//debugger
var radio = document.all.sel;
var ele = null;
for(var i=0;i <radio.length;i++)
{
if(radio[i].checked)
ele = radio[i];
}
var anchor=ele.parentNode;//指向li节点
var parent=anchor.parentNode;//指向ul节点
var removedChild=parent.removeChild(anchor); //指向当前删除的节点
var insertNodeBefore=parent.lastChild; //指向插入在哪个兄弟节点之前
parent.insertBefore(removedChild,insertNodeBefore.nextSibling); //插入节点
ele.checked=true;
}
==================================================================================
楼主可以试下,观看一下效果如何,是不是你想要的.

读书人网 >JavaScript

热点推荐