Quiero añadir pequeñas imágenes de flechas para moverse hacia arriba y hacia abajo en la fila de la tabla en Javascript (tal vez jQuery) y guardar la reordenar la tabla (sólo el orden) en la cookie para su uso posterior. Un ejemplo sería – Joomla, dentro del área de administración en el área de Artículos (pero que está hecho con php). Gracias.

  • Usted desea invertir el orden de todos los elementos, o en una celda por nivel?
  • Quiero reordenar las filas, cualquiera que sea el contenido, que sería el intercambio de dos filas con todo el interior (imágenes, otras tablas, etc.)
InformationsquelleAutor Goran | 2009-02-05

7 Comentarios

  1. 3

    Probablemente puede ser refactorizado un poco más, pero os dejo el ahorro para usted:

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

    Asumiendo esta tabla:

    <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>
    • jquery 1.3 liberado el más cercano método que podría ser utilizado en su método getParent.
    • usted también puede cambiar su intercambio a la siguiente.después(de los padres.clone());los padres.remove(); y prev.antes de….
    • bueno llame más cercano()… me debe haber olvidado de ella!
    • Buscar en jquery insertBefore y insertAfter de una mejor manera para lograr la swap método que conserva de datos y eventos.
  2. 2

    Para el jQuery parte de las cosas, se podía ver en la modificación de este plugin utilizar haciendo clic en los iconos en lugar de arrastrar-y-gota.

    • Por los comentarios, usted necesita para cambiar de línea, 92-94 utilizar .on vs .bind para jQuery 1.10+
  3. 2
    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);
        }
    
    }

  4. 1

    Esta es una vieja pregunta, pero he encontrado y uno de los puestos me puso en el camino correcto, así que para cualquier otra persona que googles aquí

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

    la tabla tendría que buscar algo como

    <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 usted tiene una tabla como la otra respuesta, usted debería ser capaz de simplemente eliminar uno de los .padre() llama y va a hacer lo mismo.

  5. 1

    insertBefore() y insertAfter() funcionan muy bien. En el ejemplo siguiente, tengo un par de etiquetas en una tabla. Hacer clic en uno mueve la fila de abajo, otro arriba. Si usted da a sus filas que se permite el movimiento (tal vez usted no desea mover filas por encima de las filas de encabezado o por debajo de filas de pie de página) de la clase de _movable, a continuación, sólo se mueven entre las filas de encabezado y pie.

    Aquí está uno de los tags: <a onclick=»return moveUp(this);» href=»javascript:return 0;»>hasta</a>

    función moveUp(aEl) { 
    var me = $($(aEl).los padres('tr').get(0)); 
    var prev = me.prev('tr'); 
    si (prev.attr('class') == '_movable') me.insertBefore(prev); 
    return false; 
    } 
    función moveDown(aEl) { 
    var me = $($(aEl).los padres('tr').get(0)); 
    var siguiente = me.siguiente('tr'); 
    si (siguiente.attr('class') == '_movable') me.insertAfter(siguiente); 
    return false; 
    } 
    
  6. 0

    Usted debería ser capaz de hacerlo con unas simples de los selectores de jQuery, captura el evento click en las flechas, y el uso de selectores para obtener la siguiente /anterior de un elemento y el intercambio.

    A continuación, utilice el selector para obtener el identificador de cada fila, sin embargo, usted está almacenando que podría tener cada fila identificado id de configuración en el registro para hacer la selección fácil. Muestra los selectores son aquí y guardar en una cookie, de nuevo simple JS para que aquí.

  7. 0
    $('.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);
            }
        });

Dejar respuesta

Please enter your comment!
Please enter your name here