由于比较忙,好久没写新的文章了,虽然本人写的文章可能对一些高手来说是小菜一碟,但是对于新手来说还是比较难得,重在为和我一样的小菜鸟提供一个简单的实现方法,以及一个思路罢了。
那么,废话少说,我们开始进入主题。
今天我们实现的是一个列表页面上移、下移功能。如图:
当勾选列表中的列时,点击上移或者下移,会动态上移或者下移。
html代码如下:
<div>
<input type="button" οnclick="up();" value=" 上移 ">
<input type="button" οnclick="down();" value=" 下移 ">
</div>
<div>
<table width="400px" height="200" class="mytable" cellpadding="5" cellspacing="0">
<tr>
<td>序号</td>
<td>名字</td>
<td>性别</td>
</tr>
<tr>
<td><input type="checkbox" id="c1"/>1</td>
<td>小一</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" id="c2"/>2</td>
<td>小二</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox" id="c3"/>3</td>
<td>小三</td>
<td>女</td>
</tr>
</table>
</div>
我们定义一个css样式叫做mytable
.mytable td,.mytable{
font-size:12px;
color:red;
border:1px solid #000;
text-align:center;
border-collapse:collapse;
}
然后实现up(),down()方法既可,代码如下:
$.each($("table input:checked"),function(){
var onthis=$(this).parent().parent();
var getUp=onthis.prev();
if ($(getUp).has("input").size()==0)
{
alert("顶级元素不能上移");
return;
}
$(onthis).after(getUp);
});
}
function down(){
$.each($("table input:checked"),function(){
var onthis=$(this).parent().parent();
var getdown=onthis.next();
$(getdown).after(onthis);
});
}
大家可以看实现很简单,我在看公司的代码是发现实现的其实很麻烦,于是自己简化了一下,利用jquery提供的函数。当然如果想实现多列同时上移下移,只需要加一个循环既可,核心代码就是上边的。