正文
jquery上移,jquery上移下移插件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jQuery上移下移操作，记住当前位置并得到当前位置顺序的id
!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]相关问答
Q1: jquery 弹出框怎么往上移
margin-top:-50px;
设置一下margin-top的值，50是自定义的，随遍你写多少，可以试着来
Q2: jQuery隔行换色和上移下移问题
在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
Q3: jquery 上移下移后如何保存
jq是前端页面上的操作,上移下移将显示的条目重新排序后,如果要在下一次调出数据时也按现在显示效果,就需要在后台数据上进行处理,对基础数据的排序做出改变,可以在改变顺序时ajax修改数据,也可以按显示的顺序重新存储显示的数据
