jquery - from - object html table cell element

Mover tr por índice a una nueva posición

Question

Tengo una tabla que tiene un diseño fijo de filas. Cada fila tiene un identificador único. Cuando los datos se devuelven desde la base de datos, tienen un orden diferente para las filas en esa tabla. Los datos devueltos tienen el mismo índice que existe en el diseño fijo, por lo que puedo encontrar la fila correspondiente en la tabla fija. Necesito mover las filas en el diseño de la tabla fija para que coincida con el orden de las filas en los datos.

Diseño de tabla:

<table>
    <tr id="a1"><td>Some Value1</td></tr>
    <tr id="a2"><td>Some Value2</td></tr>
    <tr id="a3"><td>Some Value3</td></tr>
    <tr id="a4"><td>Some Value4</td></tr>
    <tr id="a5"><td>Some Value5</td></tr>
</table>

Entonces, si el orden de la base de datos es a3, a4, a5, necesito que la tabla se vea así.

<table>
    <tr id="a3"><td>Some Value1</td></tr>
    <tr id="a4"><td>Some Value2</td></tr>
    <tr id="a5"><td>Some Value3</td></tr>
    <tr id="a1"><td>Some Value4</td></tr>
    <tr id="a2"><td>Some Value5</td></tr>
</table>

¿Es posible mover las filas por índice de fila o quizás si clono la fila, moverlo a un índice de fila específico y luego quitar la fila / posición anterior con algo como esto?

var clonedRow = $("#tbl_lp_Forms > tbody > tr[class=" + myformurl + "] ").clone(true);
$(''#tbl_lp_Forms tr:first'').before(clonedRow);

Espero que puedas ayudar!

Answer 1

¿Por qué intentas hacer la clasificación en JS? Simplemente guarde el orden de clasificación en la base de datos cuando guardan, y luego ORDER BY esa columna cuando seleccione los datos para mostrar cuando vuelvan. Puede normalizar esto colocando los índices en una tabla 1: M y uniéndolos a su tabla de datos principal, o puede almacenarlos como una cadena desnormalizada con un delimitador en la tabla de datos principal (no recomendada).

Answer 2

En primer lugar, si quiere mover la fila, no necesita clonarla. Cuando selecciona algún elemento html y lo agrega / antepone a otro lugar, se eliminará de la posición anterior; así es como funciona el DOM. Entonces, según html que escribió, cuando hace esto:

var $table = $(''table'');
$table.prepend($(''#a3''));

luego, la fila con id ''a3'' se eliminará de su posición anterior y se colocará al comienzo de la tabla.

Si suponemos que tiene una matriz con el fin que desea alcanzar:

var order = [''a3'', ''a4'', ''a5'', ''a1'', ''a2'']; 

luego, para ordenar las filas de acuerdo con esta tabla, simplemente debe iterar desde el último elemento de esta matriz, obtener una fila con la identificación actual de la tabla y colocarla en el comienzo de esta manera:

var order = [''a3'', ''a4'', ''a5'', ''a1'', ''a2'']; 
var $table = $(''table'');        

for (var i = order.length; --i >= 0; ) {
    $table.prepend($table.find(''#'' + order[i]));
}

Y cuando quiera mover una fila y colocarla antes que la otra:

var $rowa = $(''#a1'');
var $rowb = $(''#a5'');
$rowb.insertBefore($rowa);

// or even like this
$(''#a5'').insertBefore(''#a1'');