jquery: utiliser appendTo dans l'avant-dernière ligne de la table

Question

J'ai un élément du DOM que j'aimerais insérer dans ma page. Actuellement, je suis juste en utilisant aveuglément:

$(myblob).appendTo(someotherblob); 

Comment puis-je faire la même chose, tout en ajoutant MonBlob la deuxième à la dernière ligne qui se trouve dans someotherblob. someotherblob dans ce cas est une table et je veux injecter une rangée au-dessus de la seconde à la dernière.

Answer 1

$('#mytable tr:last').before("<tr><td>new row</td></tr>") 

Answer 2

J'ai récemment mis une ligne de code qui vous aide à faire face à des modifications de table:

http://notetodogself.blogspot.com/2009/08/javascript-insert-table-rows-table-body.html

En outre, vous question est pas trop claire, mais nous espérons que le lien ci-dessus couvre toutes les bases

Answer 3

Je pense que vous voulez ajouter une ligne pour chaque ligne de la table entre deux secondes et la dernière rangée.

dans cette tentative de cas:

var rows=someotherblob.find("TR"); 
var nrows=rows.length; 
    rows.slice(1,(nrows-2)).each(function(){ 
    $(this).append(myblob); 
    }) 

Answer 4

Notez que avec avant() les éléments doivent déjà être insérés dans le document (vous ne pouvez pas insérer un élément avant un autre si ce n'est pas dans la page).

Vous devez insérer someotherblob premier:

$('selector to insert someotherblob at') 
    .append(someotherblob) 
     .find('table tr:last') 
      .prev() 
      .before(myblob); 

Answer 5

Un peu d'un coup de feu dans l'obscurité, mais je devine que vous avez un pied de page, ou peut-être même la saisie de données, au fond d'une table et vous souhaitez ajouter des lignes aux données, avant le pied de page. Dans ce cas, vous devez restructurer votre table à ceci:

<table id="myTable"> 
    <thead> 
     <tr><!-- header row(s) --></tr> 
    </thead> 
    <tfoot> 
     <tr><!-- footer row(s) --></tr> 
    </tfoot> 
    <tbody> 
     <tr><!-- exciting and possibly dynamically inserted data goes here --></tr> 
    </tbody> 
</table> 

Oui, tbody ne vient après tfoot. Wierd, hein?

Ensuite, vous pouvez simplement utiliser ceci:

$("#myTable tbody").append(newrow); 

Answer 6

Aussi simple que cela:

$("#TableName tr:last").prev().before("<tr><td>Hello World</td></tr>"); 

Answer 7

Vous pouvez également sélectionner la ligne par le sélecteur d'index.

$('#mytable tr').eq(-1).before("<tr><td>new row</td></tr>") 

Ici eq est utilisé pour sélectionner la dernière ligne. eq est zéro index et l'index négatif commence à partir de la dernière. J'ai donc utilisé -1 dans l'index.

Answer 8

• J'apprécie avec la réponse donnée par orin qui était this one.

• Je l'ai essayé et j'ai constaté que la colonne requise se déplaçait littéralement au-dessus de la table d'enitre. C'est parce que je n'utilise pas l'étiquette thead pour la colonne d'en-tête. Une fois de plus, j'ai commencé à chercher la réponse et j'ai trouvé ma propre solution.

• Donc voilà: Dans mon scénario, il était nécessaire de montrer grand total de toutes les entrées venant dans chaque colonne de type de numéro unique. Il n'était pas possible pour moi de faire des calculs à moins que toutes les lignes soient peuplées à la volée.

HTML:

<tr class="gTotal"> 
     <th colspan="4" class="head">Grand Total</th> 
     <th><?php echo $grandTtlResumeSntCnt; ?></th> 
     <th><?php echo $grandTtlEvalCnt; ?></th> 
     <th><?php echo $grandTtlUniqEvalCnt; ?></th> 
     <th><?php echo $grandTtlResCnt; ?></th> 
     <th><?php echo $grandTtlUniqResCnt; ?></th> 
</tr> 
</table> 

Jquery:

$('.gTotal').insertBefore('table>tbody>tr:nth-child(2)'); 

laissez-moi savoir si je réponds à votre question.

Answer 9

$('#mytable tr:last').prev().after("<tr><td>new row</td></tr>")