[jquery] riordinare le righe di una tabella

**nexus** · 27-09-2010, 19:00

ciao a tutti,
volevo porvi una domanda.

con il vostro aiuto e specialmetne quello di xinod, adesso ho uno script realizzato con jquery che genera dei tr alla pressione di un tasto.

semplificando l'output risulta una cosa del genere:

codice:

<tr>
 <td><input type="text" id="itemA_1"></td>
 <td><input type="text" id="itemB_1"></td>
 ....................................
 <td><input type="text" id="itemG_1"></td>
 <td><input type="text" id="itemH_1"></td>
</tr>

in realtà un campo ha anche una funzione di autocomplete, e a seconda di cosa si scrive tutti i campi input vengono modificati.

la mia domanda (finalmente ci arrivo) è:

sarebbe possibile modificare gli "indici" degli input per spostarli e poi riordinarli ?
in pratica vorrei che alla presione di un pulsante(freccia su, freccia giu) tutto il contentuto di un tr si scambi con quello superiore o inferiore.
ovviamente spostando anche i valori all'inerno.

cercando di spiegare meglio il tutto,

ho una tabella creata in maniera dinamica, piu premo e piu righe compaiono.
ogni riga ha una serie di celle e input legati tra loro da un indice
xxxx_N
dove N è il numero di riga e xxxx il nome della cella.

vorrei che capitasse una cosa del tipo

codice:

<tr><td><input type="text" id="itemA_1" value="mario"><input type="text" id="itemB_1" value="rossi"></td></tr>
<tr><td><input type="text" id="itemA_2" value="luigi"><input type="text" id="itemB_2" value="verdi"></td></tr>
<tr><td><input type="text" id="itemA_3" value="franco"><input type="text" id="itemB_3" value="sterlino"></td></tr>

se volessi spostare la riga 2 su diventerebbe

codice:

<tr><td><input type="text" id="itemA_1" value="luigi"><input type="text" id="itemB_1" value="verdi"></td></tr>
<tr><td><input type="text" id="itemA_2" value="mario"><input type="text" id="itemB_2" value="rossi"></td></tr>
<tr><td><input type="text" id="itemA_3" value="franco"><input type="text" id="itemB_3" value="sterlino"></td></tr>

premetto che cambiare l'ordine solo visivamente non mi serve perchè poi devo salvare su un db e quando recupero i dati li estrapolo con lo stesso ordine di ID.

esiste un modo quindi ?
con php facevo un passaggio di variabili con le sessioni recuperando l'id.
ma con jquery e javascript in generale non son certo della realizzazione.

potreste consigliarmi dove guardare?
grazie.

**nexus** · 28-09-2010, 16:40

nessun consiglio?

**Enzaccio** · 29-09-2010, 17:51

Non ti dovrebbe tornare impossibile, far stampare un ID anche per le TR; un id che segua la numerazione come per itemA_1 e itemB_1 ottenendo:

<tr id="tr1"><td><input type="text" id="itemA_1" value="luigi"><input type="text" id="itemB_1" value="verdi"></td></tr>
<tr id="tr2"><td><input type="text" id="itemA_2"   eccetera

e con lo stesso criterio, anche un <input type="button" onclick="moveUp(1);"> in coda agli stessi INPUT già esistenti, o in una Tabella parallela; io nell' esempio, ne faccio una Tabella parallela, ma molto probabilmente nel tuo ciclo in PHP ti torna meglio la prima soluzione, in coda.

codice:

<body>

<table><tr>
     <td>

<table>
<tr id="tr1"><td><input type="text" id="itemA_1" value="luigi" ><input type="text" id="itemB_1" value="verdi"   ></td></tr>
<tr id="tr2"><td><input type="text" id="itemA_2" value="mario" ><input type="text" id="itemB_2" value="rossi"   ></td></tr>
<tr id="tr3"><td><input type="text" id="itemA_3" value="franco"><input type="text" id="itemB_3" value="sterlino"></td></tr>
</table>

</td><td>

<table>
<tr><td><input type="button" onclick='moveUp(1);' value="/\"><input type="button" onclick='moveDown(1);' value="\/"></td></tr>
<tr><td><input type="button" onclick='moveUp(2);' value="/\"><input type="button" onclick='moveDown(2);' value="\/"></td></tr>
<tr><td><input type="button" onclick='moveUp(3);' value="/\"><input type="button" onclick='moveDown(3);' value="\/"></td></tr>
</table>

</td></tr>
</table>

</body>
</html>

All' onclick si richiama una funzione e nel mentre le si passa "il" numeretto.
La function che in serata ti posterò, dovrà trovare nell' HTML i riferimenti stabiliti, per poter individuare Elementi, Attributi e Valori su cui giocare.

**Enzaccio** · 29-09-2010, 20:14

Completando la parte precedente con quest' altra sua metà, abbiamo un esempio completo; non ultimativo, ma che ci porta ben avanti nel progetto:

codice:

<html><head>

<script type="text/javascript">

function moveUp(tr){  //tr come parametro, si traduce nel numero che arriva con l' onclick
                      //e si concatena come carattere, ai  tr  caratteri; ricomponendo 
                      //dinamicamente l' id da prendere in considerazione.
                      //agli effetti è come avere, ad es.:  document.getElementById("tr3")

 Down   = document.getElementById("tr" + tr      ).getElementsByTagName("input");
 Up     = document.getElementById("tr" + (tr - 1)).getElementsByTagName("input");
                       //si fa la differenza - 1 e abbiamo l' ID della TR precedente.

     var UpValues = new Array();    //dichiara un Array;

 for (i = 0; i < 2; i++){           //e lo compila 
                                    //con i Valori letti
      UpValues[i] = Up[i].value;    //dai VALUE della  Up  Collection.
     };


     var DownValues = new Array();  //come sopra, 
                                    //per l' altra Collezione di Elementi.
 for (i = 0; i < 2; i++){
      DownValues[i] = Down[i].value;
     };

 for (i = 0; i < 2; i++){            //assegna ai VALUE della  Up  Collection 
       Up[i].value = DownValues[i];  //i Valori presi dal  DownValues  Array, 
     };                              //e vice-versa. 
 for (i = 0; i < 2; i++){
       Down[i].value = UpValues[i];  //i due for si possono fondere in uno. 
     };

 //questo alert poi lo commenti con // 
   alert("La Collezione di Elementi  Up  ha una lunghezza di  " + Up.length + "  articoli");


 }

</script>
</head>

Down e Up sono due "Collezioni" dei riferimenti agli Elementi INPUT ritrovabili nella riga individuata grazie all' ID.
Esattamente, è Down che individuiamo al click; Up la traiamo di conseguenza.

La quantità dei campi INPUT da gestire per riga, si presume conosciuto e costante e l' esecuizione dei cicli for si fa arrestare al i < 2 vale a dire, il for fa "due colpi" contando [0] e [1] e con lo stesso preciso ordine di indici ritrova "le cose" sia nei due Array di Valori che nelle due Collection di textbox.

.length torna utile per "contare" quanti articoli contiene una Collection o un Array, nel caso di quantità create dinamicamente e non conosciute a priori.
Vedi nell' alert() la sua traduzione.

Discussione: [jquery] riordinare le righe di una tabella

Strumenti discussione

Ricerca discussione

Visualizza

[jquery] riordinare le righe di una tabella

getElementById

Array popolato dinamicamente

Permessi di invio