!DOCTYPE HTML
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、虚拟空间、营销软件、网站建设、盐池网站维护、网站推广。
html
head
meta charset=UTF-8 /
titleNothing/title
style type="text/css"
/style
script type="text/javascript" src="jquery-1.8.0.min.js"/script
script
$ (function ()
{
$ (':button').click (function ()
{
var type = $ (this).val ();
var tr = $ (this).closest ('tr');
if (type == "上移")
{
var newIndex = tr.prop ('rowIndex') - 1;
if (newIndex = 0)
{
tr.insertBefore ('tr:eq(' + newIndex + ')');
}
else
{
tr.insertAfter ('tr:last');
}
}
else if (type == "下移")
{
var newIndex = tr.prop ('rowIndex') + 1;
if (newIndex $('tr').length)
{
tr.insertAfter ('tr:eq(' + newIndex + ')');
}
else
{
tr.insertBefore ('tr:first');
}
}
})
});
/script
/head
body
table
tr
td22222/td
tdinput type="button" value="上移" //td
tdinput type="button" value="下移" //td
/tr
tr
td00000/td
tdinput type="button" value="上移" //td
tdinput type="button" value="下移" //td
/tr
tr
td11111/td
tdinput type="button" value="上移" //td
tdinput type="button" value="下移" //td
/tr
/table
/body
/html
[img]margin-top:-50px;
设置一下margin-top的值，50是自定义的，随遍你写多少，可以试着来
在css定义好，不管怎样上移还是下移始终都是隔行换色的。
style
*{ padding:0;margin:0; }
.list{ width:358px;margin:0 auto;border:1px solid #000; }
.listview{ height:35px;line-height:35px;width:100%;text-indent:20px;color:#fff;background-color:#999; }
.listview:nth-child(2n){ background-color:#ccc;color:#000; }
.listview button{ padding:0 10px; }
/style
/head
body
div class="list"
div class="listview"1
button class="up"上/button
button class="down"下/button
/div
div class="listview"2
button class="up"上/button
button class="down"下/button
/div
div class="listview"3
button class="up"上/button
button class="down"下/button
/div
div class="listview"4
button class="up"上/button
button class="down"下/button
/div
div class="listview"5
button class="up"上/button
button class="down"下/button
/div
/div
/body
script type="text/javascript"
$(function(){
$(".up").click(function(){
if( $(this).parent().prev().index()=0 ){
$(this).parent().prev().before($(this).parent());
}
});
$(".down").click(function(){
if( $(this).parent().next().index()$(".listview").length ){
$(this).parent().next().after($(this).parent());
}
});
});
/script
jq是前端页面上的操作,上移下移将显示的条目重新排序后,如果要在下一次调出数据时也按现在显示效果,就需要在后台数据上进行处理,对基础数据的排序做出改变,可以在改变顺序时ajax修改数据,也可以按显示的顺序重新存储显示的数据