Javascript Girl
  1. Javascript Girl
  3. Transfert des données du tableau
Intereting Posts
Comment définir le contrôleur, le routeur et l'application dans le bon ordre en utilisant les exigences Reliure de données jQuery TwoWay Est-ce que 2 appels consécutifs. Jquery exécutent async? JQuery Uncaught TypeError: Object n'a pas de curseur de méthode Scrap d'écran via AJAX et javascript Node.js: Comment configurer différentes variables pour prod et mise en scène Stubbing jQuery.ajax dans l'environnement de noeud (jQuery 2.x) Comment attraper une erreur "Maximum stack stack exceeded"? Ajoutez deux options supplémentaires à une liste de sélection avec ngOptions sur elle Remplacez une liste d'émoticônes par leurs images Module de nœud de charge avec SystemJS et Karma in Angular 2 Lier la fermeture d'un premier modal à l'ouverture d'un second mode Comment réinitialiser l'état d'un magasin Redux? Ajouter dynamiquement des propriétés à l'objet prototype JQuery trouve la dernière entrée et ajoute

Transfert des données du tableau

J'ai un tableau en HTML. 

<tr class="top"> <td class="name1"><a href="#">JOHN DOE</a></td> <td class="company1">DOE TRUCKING</td> <td class="position1">TRUCKER</td> <td class="mc1">1234-567-8901</td> <td class="dot1">1234-567-8901</td> <td class="status1"><img src="images/cross.png" width="12" height="12" alt="cross"></td> </tr>

Lorsque je sélectionne le nom dans le tableau, il ouvre une fenêtre contextuelle. 

 <div class="popup1"> <div class="cross3"><a href="#"><img src="images/closr-arrow.png" width="19" height="19" alt="closr-arrow"></a></div> <h3>TABLE NAME</h3> <a href="#" class="approve">APPROVE ACCOUNT</a> <a href="#" class="deny">DENY ACCOUNT</a> </div>

Comment puis-je le faire, alors H3 conserve le nom qui se trouvait dans ma table?

Pop-up est affiché comme suit: 

  $(document).ready(function(){ $('.name1 a').click(function(e) { $('.popup1').lightbox_me({ });

Voici le jsfiddle, je ne sais pas comment gérer votre popup, mais c'est ainsi que vos js devraient être structurés. 

 $(function(){ $('a').click(function(){ $('h3').html($(this).html()) }); });

En supposant que le popup s'ouvre lorsque vous cliquez sur <a> vous pouvez simplement utiliser $(this).text() et faire quelque chose comme ceci: 

 $(document).ready(function(){ $('.name1 a').click(function() { $('.popup1 h3').text($(this).text()); }); });

Exemple complet: 

 <table><td class="name1"><a href="#">JOHN DOE</a></td> <td class="company1">DOE TRUCKING</td> <td class="position1">TRUCKER</td> <td class="mc1">1234-567-8901</td> <td class="dot1">1234-567-8901</td> <td class="status1"><img src="images/cross.png" width="12" height="12" alt="cross"></td> </table> <div class="popup1"> <div class="cross3"><a href="#"><img src="images/closr-arrow.png" width="19" height="19" alt="closr-arrow"></a></div> <h3>TABLE NAME</h3> <a href="#" class="approve">APPROVE ACCOUNT</a> <a href="#" class="deny">DENY ACCOUNT</a> </div> <script> $(document).ready(function(){ $('.name1 a').click(function() { $('.popup1').lightbox_me({}); // <-- whatever your popup is, it plays no role here $('.popup1 h3').text($(this).text()); }); }); </script>

Désolé, vous dites lightbox, mais je ne vois pas comment cela s'appelle ou quelle lightbox a donné que lightbox est plus une chose de galerie.

C'est pourquoi j'ai utilisé la boîte de dialogue jQueryUI à la place, si cela ne vous aidera pas, quelqu'un devrait vous enlever le clavier, et j'espère que celui-ci vous permettra également de faire des doublons (en supposant que les noms de classe soient supposés). 

 <?php $rows=array( 0=>array("id"=>'1',"name"=>'Tom',"company"=>'U',"status"=>'active'), 1=>array("id"=>'2',"name"=>'Hre',"company"=>'E',"status"=>'suspended'), 2=>array("id"=>'3',"name"=>'Peter',"company"=>'Pawtucket',"status"=>'wasted'), 3=>array("id"=>'4',"name"=>'Griffin',"company"=>'Patriot',"status"=>'drunk'), ); ?> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <link href="/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet"> <script type="text/javascript" src="/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script> <style> .name {color:#00F;} </style> <script> $(document).ready(function(){ $("#popup").dialog({ autoOpen: false, modal: true, width: 500, height: 500, title: "Content From Row", closeOnEscape: true, closeText: "fechar", show: { effect: "fadeIn", duration: 1000 }, hide: { effect: "fadeOut", duration: 1000 } }); }); </script> <script> $(document).ready(function(){ $('.name a').click(function() { $('#popup h3').text($(this).text()); $(this).parent().siblings().each(function(){ if($(this).hasClass('company')){ $('#popup .popup_company').text($(this).text()); } if($(this).hasClass('status')){ $('#popup .popup_status').text($(this).text()); } }); $("#popup").dialog('open'); }); }); </script> </head> <body> <?php if(is_array($rows)){ ?><table> <tr><td>Row No</td><td>ID</td><td>Name</td><td>Company</td><td>Status</td></tr> <?php foreach($rows as $row_key=>$row){ ?><tr><?php if(is_array($row)){ echo('<td>'.$row_key.'</td>'); foreach($row as $value_key=>$value){ if($value_key == "name"){ echo('<td class='.$value_key.'><a>'.$value.'</a></td>'); }else{ echo('<td class='.$value_key.'>'.$value.'</td>'); } } } ?></tr><?php } ?></table><?php } ?> <div style="display:none;"><div id="popup"> <div class="cross3"> <a href="#"><img src="images/closr-arrow.png" width="19" height="19" alt="closr-arrow"></a> </div> <h3>TABLE NAME</h3> <a href="#" class="popup_company"></a> <a href="#" class="popup_status"></a> <a href="#" class="approve">APPROVE ACCOUNT</a> <a href="#" class="deny">DENY ACCOUNT</a> </div></div> </body> </html>