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

Probably can be refactored a bit more, but I leave 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>