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

WBOY
풀어 주다: 2016-06-13 12:25:22
원래의
1052명이 탐색했습니다.

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

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

下面是js代码:

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

求各位大神帮帮忙,已经卡住好几天了
------解决思路----------------------

<script src=scripts/jquery-1.8.3.min.js></script><br /><table><br /><tr><td class='xh'>1</td><td class='up'>上移</td><td class='down'>下移</td></tr><br /><tr><td class='xh'>2</td><td class='up'>上移</td><td class='down'>下移</td></tr><br /><tr><td class='xh'>3</td><td class='up'>上移</td><td class='down'>下移</td></tr><br /><tr><td class='xh'>4</td><td class='up'>上移</td><td class='down'>下移</td></tr><br /><tr><td class='xh'>5</td><td class='up'>上移</td><td class='down'>下移</td></tr><br /><tr><td class='xh'>6</td><td class='up'>上移</td><td class='down'>下移</td></tr><br /></table><br /><input type=button value=确认 id=bn><br /><script language="JavaScript" type="text/javascript"><br />$(function(){<br />  $('#bn').click(function() {<br />    var r = [];<br />    $('.xh').each(function(i, t) {<br />      r.push($(this).html());<br />    });<br />    alert(r);<br />    //$.post(url, {xh:r});<br />  });<br /><br />  var $up = $(".up")<br />  $up.click(function() {<br />    var $tr = $(this).parents("tr");<br />    if ($tr.index() != 0) {<br />      $tr.fadeOut().fadeIn();<br />      $tr.prev().before($tr);<br />    }<br />  });<br />  var $down = $(".down");<br />  var len = $down.length;<br />  $down.click(function() {<br />    var $tr = $(this).parents("tr");<br />    if ($tr.index() != len - 1) {<br />      $tr.fadeOut().fadeIn();<br />      $tr.next().after($tr);<br />    }<br />  });<br />  var $top = $(".top");<br />  $top.click(function(){<br />    var $tr = $(this).parents("tr");<br />    $tr.fadeOut().fadeIn();<br />    $(".table").prepend($tr);<br />    $tr.css("color","#f60");<br />  });<br />});<br /></script>
로그인 후 복사

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿