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

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

WBOY
Freigeben: 2016-06-13 12:25:22
Original
1074 Leute haben es durchsucht

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>
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage