Jquery: clone table dentro append

**fabiodm75** · 30-01-2012, 14:19

Come da titolo,
devo clonare una tabella dentro un append di un'altra tabella ho provato così:

codice:

$("#tblNuova").append("<tr style='page-break-before:always'><td>" + jQuery("#tblIntestazione").clone(true) + "</td></tr>");

non ricevo errori Javascript però nel punto dove dovrebbe esserci la tabella ricevo questo: [object Object]

**antotan** · 30-01-2012, 14:54

Il risultato è consistente perchè tu stai concatenando una stringa con un object.
Questo:

codice:

"" + {} + ""

restituisce giustamente "[object Object]"

Quello che vuoi fare tu è qualcosa del genere invece:

codice:

var cloned = jQuery("#tblIntestazione").clone(true);
var row = $("<tr>").append( $("<td>").append(cloned) );
$("#tblNuova").append(row);

**fabiodm75** · 30-01-2012, 18:16

Originariamente inviato da antotan
Il risultato è consistente perchè tu stai concatenando una stringa con un object.
Questo:

codice:

"" + {} + ""

restituisce giustamente "[object Object]"

Quello che vuoi fare tu è qualcosa del genere invece:

codice:

var cloned = jQuery("#tblIntestazione").clone(true);
var row = $("<tr>").append( $("<td>").append(cloned) );
$("#tblNuova").append(row);

Si così, come suggerisci, mi stampa però non ottengo l'effetto voluto, così invece l'ottengo:

codice:

$("#tblNuova").append("<tr style='page-break-before:always'><td colspan='" + $("#tblOriginale tr:eq(0) td").length + "'><table id='tblIntestazione'><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></table></td></tr>");

Però perchè me la vado ad inserire in modo statico purtroppo perdo delle info che sono lato server, ecco perchè la vorrei fare con JQuery

**fabiodm75** · 30-01-2012, 18:26

ok risolto bastava mettere il colspan nel TD in cui clonavo la table Intestazione...

Ora però nella tabella Intestazione clonata devo andare a cambiare il testo nella TR numero 6 e qui dovrei utilizzare una sintassi del tipo:

appendTo('#tblNuova tr:eq(6) td:eq(0)');

però qui come glielo dico:

$("#tblNuova").append(row);

**fabiodm75** · 30-01-2012, 18:59

Sto provando così:

codice:

var cloned = jQuery("#tblIntestazione").clone(true).find("#tblIntestazione tr:eq(6) td:eq(0)").appendTo('altro testo');

ma ora non mi stampa la tabella clonata e non ricevo neanche errore...

**antotan** · 30-01-2012, 19:07

Originariamente inviato da fabiodm75

codice:

$("#tblNuova").append("<tr style='page-break-before:always'><td colspan='" + $("#tblOriginale tr:eq(0) td").length + "'><table id='tblIntestazione'><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></table></td></tr>");

Il codice del tuo primo post e il codice qui sopra non sono equivalenti perchè nel primo caso concateni una stringa con un object (quindi non stai appendendo un nodo ad un altro) mentre nel secondo caso stai concatenando una stringa con un intero (lecito, per le regole di coercizione) e ti da un risultato coerente (settare il colspan di un td).

Per il resto, non ho ben capito che risultato intendi raggiungere. Spero tu abbia risolto altrimenti posta pure un esempio.

Edit: ho guardato il tuo ultimo post, stai sbagliando selettori e metodi, se puoi posta un esempio completo che procediamo passo passo.

**fabiodm75** · 30-01-2012, 19:13

Cerco di spiegarmi meglio anche se non è facile... la tblIntestazione ha un valore testo alla posizione tr:eq(6) td:eq(0) che devo cambiare tutte le volte che clono, come ti dicevo sono arrivato al punto che funziona mi clona perfettamente la tabella tblIntestazione però come faccio a cambiare il testo? Più che altro non capisco se lo devo fare PRIMA del clone oppure DOPO aver fatto il clone.

**antotan** · 30-01-2012, 19:25

Faccio queste ipotesi:
ho una tabella che devo clonare. ogni volta che la clono devo cambiare la cella <x, y> e poi devo appendere la tabella da qualche parte:

codice:

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
  <style>
    #tbl td {
      border : 1px solid black;
      padding : 5px;
    }    
  </style>
  <script>
      function clone() {        
        var tbl = $("#tbl");
        var cloned = tbl.clone(true);
        var td = cloned.find("tr:eq(1) td:eq(0)");        
        td.html("Nuovo - Variabile " + (counter++));
        
        cloned.insertAfter(tbl);
      }
  
      var counter = 0;
      $(document).ready(function() {        
        $("#btn").click(clone);
      });
  </script>
  <body>
    <button id="btn">Clona</button>
    <table id="tbl" style="border : 1px solid black">
      <tr>
        <td>Fisso 0, 0</td><td>Fisso 0, 1</td>
      </tr>
      <tr>
        <td>Variabile</td><td>Fisso 1, 1</td>
      </tr>
    </table>
  </body>
</html>

Ogni click sul button clona la tabella, cambia il testo di tr:eq(1) td:eq(0) e poi appende la tabella subito dopo quella originale.
Cerchi questo?

**fabiodm75** · 30-01-2012, 19:26

Forse è meglio così in parole povere è possibile modificare un testo di una tabella clonata?

**antotan** · 30-01-2012, 19:30

Originariamente inviato da fabiodm75
Forse è meglio così in parole povere è possibile modificare un testo di una tabella clonata?

Sì, questa parte lo fa:

codice:

var tbl = $("#tbl");
var cloned = tbl.clone(true);
var td = cloned.find("tr:eq(1) td:eq(0)");        
td.html("Nuovo - Variabile " + (counter++));

Discussione: Jquery: clone table dentro append

Strumenti discussione

Ricerca discussione

Visualizza

Jquery: clone table dentro append

Permessi di invio