2011-10-26 2 views
0

J'ai une table et un lien en dessous. Je dois être capable de cliquer sur ce lien, copier le tableau ci-dessus, avec tout son contenu et le coller sous cette table d'origine.Copier HTML w/jQuery

<table> 
... 
</table> 
<br> 

<a href="#" id="copyTbl">copy</a> 

J'ai essayé quelque chose comme ça, mais a échoué:

$("#copyTbl").click(function() { 
    $(this).closest("table").html().clone().appendTo("br"); 
}); 

Suis-je enfilant ce mal?

+0

Avez-vous l'intention d'insérerAprès la balise br? – kinakuta

Répondre

2

Essayez quelque chose comme ça, court et simple:

http://jsfiddle.net/wfqa7/6/

edit: soyez prudent lors du clonage des éléments avec ID: P

modifier: gérer les ID lors du clonage http://jsfiddle.net/wfqa7/8/

+0

Est-ce qu'il clone ID aussi? Je suppose que clone est clone, hah? – santa

+0

oui, il clone tout l'élément DOM, ID et tout ... peut-être préférable de sélectionner sur une classe à la place, car avoir plusieurs éléments avec la même classe ne viole aucune norme: P – jbabey

+1

Peut ID être réécrit après clone()? id = "myTable" -> id = "myTable1" – santa

3

.html() renvoie une chaîne.
Vous ne pouvez pas cloner une chaîne.

Vous devez appeler .clone() pour renvoyer de nouveaux noeuds DOM ou .html() pour renvoyer une chaîne HTML brute, mais pas les deux.

En outre, vous ne pouvez pas mettre une table à l'intérieur d'un <br />; vous devriez appeler insertAfter; pas appendTo.

+0

+1, j'ai raté celui-là –

4

Il y a quelques problèmes ici. closest recherche le premier ancêtre correspondant. Puisque le lien n'est pas contenu dans la table, cela ne correspondra pas. Vous aurez besoin de faire correspondre différents, peut-être un id ou un autre sélecteur basé sur votre structure html complète.

2ème, vous ne pouvez pas ajouter à un br depuis appendTo place l'élément à l'intérieur et br n'a pas "à l'intérieur". Vous voulez utiliser insertAfter à la place.

EDIT: et comme indiqué par SLaks, déposez le html et cloner la table, vous ne pouvez pas cloner la chaîne.

+0

+1 mais cela n'aborde pas le problème '.html(). Clone()'. – lonesomeday

+0

OK, en supposant que je ne connais pas l'ID et que j'ai déjà ajouté un tas de tables, comment cloner le dernier, celui qui est le plus proche du lien? – santa

+0

Si ce sont les seules tables sur la page, vous pouvez utiliser '$ (" table "). Last()', difficile de dire exactement sans connaître toute la page. –

1

Est-ce que je l'enfile incorrectement?

Oui et non. .html() renvoie une chaîne qui n'a pas de méthode .clone(). Soit cloner les éléments, ou utilisation .html():

$("#copyTbl").click(function() { 
    $(this).closest("table").clone().insertAfter("br"); 
    // or 
    $("br").after($(this).closest("table").html()); 
}); 

Les chaînes sont immuables, donc il n'y a pas besoin d'une méthode clone.