当前位置: 代码迷 >> PHP >> jQuery实现列表上下移动而且带入数据库
  详细解决方案

jQuery实现列表上下移动而且带入数据库

热度:62   发布时间:2016-04-28 16:57:50.0
jQuery实现列表上下移动并且带入数据库

这是页面的上下移动功能,怎么能把移动后的顺序带入数据库

下面是js代码:

<script language="JavaScript" type="text/javascript">
$(function(){
var $up = $(".up")
$up.click(function() {
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.fadeOut().fadeIn();
$tr.prev().before($tr);
 
}
});
var $down = $(".down");
var len = $down.length;
$down.click(function() {
var $tr = $(this).parents("tr");
if ($tr.index() != len - 1) {
$tr.fadeOut().fadeIn();
$tr.next().after($tr);
}
});
var $top = $(".top");
$top.click(function(){
var $tr = $(this).parents("tr");
$tr.fadeOut().fadeIn();
$(".table").prepend($tr);
$tr.css("color","#f60");
});
});
</script>

求各位大神帮帮忙,已经卡住好几天了
------解决思路----------------------
<script src=scripts/jquery-1.8.3.min.js></script>
<table>
<tr><td class='xh'>1</td><td class='up'>上移</td><td class='down'>下移</td></tr>
<tr><td class='xh'>2</td><td class='up'>上移</td><td class='down'>下移</td></tr>
<tr><td class='xh'>3</td><td class='up'>上移</td><td class='down'>下移</td></tr>
<tr><td class='xh'>4</td><td class='up'>上移</td><td class='down'>下移</td></tr>
<tr><td class='xh'>5</td><td class='up'>上移</td><td class='down'>下移</td></tr>
<tr><td class='xh'>6</td><td class='up'>上移</td><td class='down'>下移</td></tr>
</table>
<input type=button value=确认 id=bn>
<script language="JavaScript" type="text/javascript">
$(function(){
  $('#bn').click(function() {
    var r = [];
    $('.xh').each(function(i, t) {
      r.push($(this).html());
    });
    alert(r);
    //$.post(url, {xh:r});
  });

  var $up = $(".up")
  $up.click(function() {
    var $tr = $(this).parents("tr");
    if ($tr.index() != 0) {
      $tr.fadeOut().fadeIn();
      $tr.prev().before($tr);
    }
  });
  var $down = $(".down");
  var len = $down.length;
  $down.click(function() {
    var $tr = $(this).parents("tr");
    if ($tr.index() != len - 1) {
      $tr.fadeOut().fadeIn();
      $tr.next().after($tr);
    }
  });
  var $top = $(".top");
  $top.click(function(){
    var $tr = $(this).parents("tr");
    $tr.fadeOut().fadeIn();
    $(".table").prepend($tr);
    $tr.css("color","#f60");
  });
});
</script>
  相关解决方案