javascript - 使用向上和向下箭头图像对表格行重新排序？

Question

我想添加小图像箭头，用于在 Javascript(也许是 jQuery)中的表格行上上下移动，并将重新排序的表格(仅顺序)保存在 cookie 中以供进一步使用。一个例子是 - Joomla，在文章区域的管理区域内(但这是用 php 完成的)。谢谢。

Answer 1

可能可以进一步重构，但我将节省的时间留给您:

function swap(a, b, direction){
  var html = a.wrapInner('<tr></tr>').html()
  a.replaceWith(b.wrapInner('<tr></tr>').html())
  b.replaceWith(html)
}
function getParent(cell){ return $(cell).parent('tr') }
$(document).ready(function(){
  $('.upArrow').live('click', function(){
    var parent = getParent(this)
    var prev = parent.prev('tr')
    if(prev.length == 1){ swap(prev, parent); }
  })
  $('.downArrow').live('click', function(){
    var parent = getParent(this)
    var next = parent.next('tr')
    if(next.length == 1){ swap(next, parent) }
  })
})

假设这张表:

<table>
  <tbody>
    <tr><td>1</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
    <tr><td>2</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
    <tr><td>3</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
  </tbody>
</table>