utiliser Jquery pour insérer div sur ma page à une autre partie de ma page

Je vais donner un exemple simple de ce que je veux faire.utiliser Jquery pour insérer div sur ma page à une autre partie de ma page

J'ai cette table. Statique. J'ai cinq boutons et cinq divs correspondants. Lorsque je clique sur le bouton, je veux que la table soit placée dans le div correspondant.

quelque chose comme.

$("#button1").button().click($("#div1").append($("#mytable"));

et ainsi de suite. Cela peut-il être fait? Comment?

Aussi, S'il vous plaît me dire s'il y a une meilleure façon de le faire, si j'essaie de réinventer la roue ou quelque chose comme ça ...

DE TRAVAIL:

Le code que je fini en utilisant, basé sur de solutions:

$("#test").button().click(function() { $("#test2").append($("#table_EditInformation")); });

test est un bouton test2 est un div table_EditInforation est évidemment une table

Source

2010-12-08 kralco626

Je devrais noter que je ne veux pas mettre 5 copies de la table sur la page, une dans chaque div, et cacher/montrer quand le bouton est cliqué, même si je sais que cela fonctionnerait. – kralco626

pour un exemple de travail, copiez le fichier html/js ci-dessous dans un fichier "index.html" ou un fichier .html et essayez-le.

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> 
<script> 
$(document).ready(function(){ 
$("#button1").click(function() { 
     $("#div1").empty().append($("#mytable")); 
}); 
}); 
</script> 
</head> 
<body> 
<a href="#" id="button1">the link or button to be pressed</a> 
<div id="div1"> 
    <p>stuff should be put here</p> 
</div> 
<table id="mytable"> 
    <tr> 
     <td>put my table in the div please! </td> 
    </tr> 
</table> 
</body> 
</html>

la plaine code javascript suit:

$("#button1").click(function() { 
    $("#div1").append($("#mytable")); 
    });

rappelez-vous, l'élément avec l'id $ ("# matable") doit être dans le même arbre dom.

vous pouvez également utiliser .empty() avant .append() pour vider le contenu de #div

comme ceci:

$("#button1").click(function() { 
    $("#div1").empty().append($("#mytable")); 
    });

Consultez la documentation ici jquery.html()

Source

2010-12-08 13:44:02 mahatmanich

+1, cela peut aussi être amélioré pour trouver la DIV parente du bouton, ce qui évite d'avoir à coder l'ID en dur, mais ce n'est qu'un bonus. :) –

Donc, il semble que mon problème principal était je ne dis pas. Html() – kralco626

Non, je suis juste stupide. Je n'ai pas mis le # devant le nom de la table ... wow je suis un idiot. Alors, quelle est la différence entre mettre .html() et ne pas le mettre? Je semble avoir le même effet? Oh et merci pour l'astuce à propos de vide() j'ai besoin de ça aussi! – kralco626

$("#button1").click(function(){ 
    $("#div1").append($("#mytable")); 
    });

Doit le faire pour vous

Source

2010-12-08 13:47:11 Mantar

function appendTableTo(divId) { 
    $('#mytable') 
    .remove()    // take the table out of whatever div it's in 
    .appendTo(divId);  // and place it into the right div 
} 

function addHandler(buttonId, divId) { 
    $(buttonId).button().click(
    function(divId){ 
     return function(){ 
     appendTableTo($(divId)); 
     }; 
    }(divId) 
); 
} 

addHandler('#button1', '#div1'); 
addHandler('#button2', '#div2'); 
addHandler('#button3', '#div3'); 
addHandler('#button4', '#div4'); 
addHandler('#button5', '#div5');

Cela devrait le faire. Nous avons seulement une fonction d'ajout qui place la table dans le bon div. En outre, nous avons une fonction qui attache ce gestionnaire de clic à un bouton. Et nous appelons cela cinq fois.

La fonction addHandler utilise une fermeture. Cela est nécessaire car nous devons passer un argument à la fonction appendTableTo, ce qui n'est pas possible autrement.

Source

2010-12-08 14:02:48 travelboy

J'aime vraiment cette solution. Mabye Je pourrais faire quelque chose avec les classes donc je n'ai pas besoin de répéter addHandler à chaque fois. les boutons ont tous la même classe = "myclass" puis ajoutez le gestionnaire à tout avec .myclass ... ce serait vraiment bien pour ma situation. – kralco626

La diffculty avec l'aide d'une classe associe divs aux boutons. Vous pouvez également utiliser une boucle: pour (var i = 1; i <= 5; i ++) addHandler ('# bouton' + i, '# div' + i); – travelboy

sauf si vous avez enveloppé le div et le bouton dans un autre div.

vous pourriez obtenir le div lorsque le bouton clique sur .parent(). Children ("div") ou quelque chose du genre. – kralco626

utiliser Jquery pour insérer div sur ma page à une autre partie de ma page

Répondre

Questions connexes