Reordering of table rows with arrow images for up and down?

Question

I want to add small images-arrows for moving up and down on table row in Javascript (maybe jQuery) and save the reordered table (only the order) in cookie for further use. An example would be - Joomla, inside the admin area in the Articles area (but that is done with php). Thanks.

Answer 1

For the jQuery part of things, you could look into modifying this plugin to use clicking on icons instead of drag-and-drop.

Answer 2

You should be able to do it with some simple jQuery selectors, capture the click event on the arrows, and use selectors to get the next / previous element and swap them.

Then use selector to get id of each row, however you are storing that - could have each row identified setting id on the tr to make selection easy. Sample selectors are here and store it to a cookie, again simple JS for that here.

Answer 3

Probably can be refactored a bit more, but I live the saving to you:

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) }
  })
})

Assuming this table:

<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>

Answer 4

This is an old question, but I found it and one of the posts set me on the right course, so for anyone else that googles here

using jQuery

function Func(trigger, blnUp){
var trigRow = $("#" + trigger.id).parent().parent();
var prevRow = trigrRow.prev();
var nextRow = trigRow.next();
var trigRowHTML = "";
if(blnUp){
    trigRowHTML = prevRow.html();
    prevRow.html(trig.html());
}else{
    trigRowHTML = nextRow.html();
    nextRow.html(trig.html());
    }
}

the table would need to look something like

<table>
  <tbody>
    <tr><td>1</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
    <tr><td>2</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
    <tr><td>3</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
  </tbody>
</table>

If you have a table like the other answer, you should be able to just remove one of the .parent() calls and it will do the same.