Réorganisation des lignes de table avec des images fléchées pour monter et descendre?

Question

Je veux ajouter de petites images-flèches pour monter et descendre sur la rangée de table en Javascript (peut-être jQuery) et enregistrer la table réordonnée (seulement la commande) en cookie pour une utilisation ultérieure. Un exemple serait - Joomla, à l'intérieur de la zone d'administration dans la zone Articles (mais cela est fait avec PHP). Merci.

Answer 1

peut probablement refactorisé un peu plus, mais je laisse l'économie vous:

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

En supposant que ce tableau:

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

Pour la partie jQuery, vous pouvez modifier this plugin pour cliquer sur les icônes au lieu de glisser-déposer.

Answer 3

Vous devriez pouvoir le faire avec quelques sélecteurs jQuery simples, capturer l'événement click sur les flèches, et utiliser des sélecteurs pour obtenir l'élément suivant/précédent et les échanger.

Ensuite, utilisez le sélecteur pour obtenir l'identifiant de chaque ligne, mais vous stockez cela - chaque identificateur de ligne pourrait être identifié sur la tr pour faciliter la sélection. Les sélecteurs d'échantillons sont here et stockent dans un cookie, à nouveau simple JS pour ce here.

Answer 4

C'est une vieille question, mais je l'ai trouvé et un des postes me mettre sur la bonne voie, donc pour quelqu'un d'autre que googles ici

utilisant 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()); 
    } 
} 

appels de la table doit ressembler à quelque chose comme

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

Si vous avez une table comme l'autre réponse, vous devriez être en mesure de retirer juste un des .parent() et il fera de même .

Answer 5

insertBefore() et insertAfter() fonctionnent bien. Dans l'exemple ci-dessous, j'ai un couple de balises A dans une table. En cliquant sur l'un déplace la ligne vers le bas, l'autre vers le haut. Si vous donnez à vos lignes autorisées à se déplacer (peut-être que vous ne voulez pas déplacer les lignes au-dessus des rangées d'en-tête ou des rangées de bas de page), elles se déplaceront uniquement entre les lignes d'en-tête et de pied de page.

Voici l'une des balises A: < a onclick = "return moveUp (this);" href = "javascript: return 0;" > jusqu'à </a >

 
function moveUp(aEl) { 
    var me = $($(aEl).parents('tr').get(0)); 
    var prev = me.prev('tr'); 
    if (prev.attr('class') == '_movable') me.insertBefore(prev); 
    return false; 
} 
function moveDown(aEl) { 
    var me = $($(aEl).parents('tr').get(0)); 
    var next = me.next('tr'); 
    if (next.attr('class') == '_movable') me.insertAfter(next); 
    return false; 
} 

Answer 6

function UpperBttn_Pressed(this) { 

    var RowIndex = X.parentNode.parentNode.rowIndex; 
    var ParentTable = X.parentNode.parentNode.parentElement; 
    if (RowIndex != 0 && RowIndex != 1) { 
     ParentTable.moveRow(RowIndex, RowIndex - 1); 
    } 

} 
function DownBttn_Pressed(this) { 

    var RowIndex = X.parentNode.parentNode.rowIndex; 
    var ParentTable = X.parentNode.parentNode.parentElement; 
    var NthRow = GetElement("dataTable").rows.length; 
    if (RowIndex!=NthRow-1) { 
     ParentTable.moveRow(RowIndex, RowIndex + 1); 
    } 

} 

Answer 7

$('.upArrow').livequery('click', function() { 
     var row = $(this).closest('tr'); 
     var prev = row.prev(); 
     if (prev.length == 1) { 
       row.detach(); 
       prev.before(row); 
     } 
    }); 
    $('.downArrow').livequery('click', function() { 
     var row = $(this).closest('tr'); 
     var next = row.next('tr'); 
     if (next.length == 1) { 
      row.detach(); 
      next.after(row); 
     } 
    });