Home > Backend Development > PHP Tutorial > jQuery实现列表上下移动而且带入数据库

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

WBOY
Release: 2016-06-13 12:25:22
Original
1073 people have browsed it

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>
Copy after login

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template