JQuery: Itérer dans toutes les lignes de table et afficher des popups pour chaque cellule avec une certaine classe

Question

En utilisant JQuery, j'essaie de parcourir toutes les lignes d'une table et d'afficher une fenêtre temporisée pour chaque cellule ayant la classe = " cell-which-triggers-popup ".

La fonction JQuery ci-dessous affiche uniquement une fenêtre contextuelle pour la première cellule trouvée. Comment puis-je l'obtenir pour afficher un popup pour chaque cellule avec cette classe.

J'ai un exemple de travail ici - jsfiddle

HTML:

<div id="popup" data-name="name" class="dialog" title="Bar Crossing Alert!"> 
    <p></p>    
</div> 
<table id="1" border="1"> 
    <tr> 
     <th>Trip ID</th> 
     <th>Status</th> 
    </tr> 
    <tr> 
     <td class="cell-with-id">585</td> 
     <td class="cell-which-triggers-popup">bar x</td> 
    </tr> 
     <tr> 
     <td class="cell-with-id">444</td> 
     <td class="closed">closed</td> 
    </tr> 
     <tr> 
     <td class="cell-with-id">007</td> 
     <td class="cell-which-triggers-popup">bar x</td> 
    </tr> 
     <tr> 
     <td class="cell-with-id">987</td> 
     <td class="open">open</td> 
    </tr> 
</table> 

JQuery:

 $("tbody tr td.cell-which-triggers-popup").each(function() { 
    var cell_value = $(".cell-with-id").html(); 
       setInterval(function() { 
     showPopup(cell_value)  
    }, 3000); 
    }); 

    function showPopup(tr_id){ 
     $("#popup").dialog({ 
      width: 300, 
      /*height: auto,*/ 
      resizable: false, 
       show: 'blind', 
       hide: 'blind', 
      open: function(){ 
       $(this).find("p").html('At Least 10 minutes has expired.<br />Please check the status of the<br />current Bar Crossing.<br />Trip Report ID: ' + tr_id) 
      } 
     }); 
    } 

Answer 1

En effet, la boîte de dialogue présente l'élément avec id = "popup", et il n'y en a qu'un. Si vous voulez faire apparaître plusieurs boîtes de dialogue, vous devrez créer un nouvel élément à chaque fois:

var $dialog = $("#popup").clone(); 
$dialog.dialog(DIALOG_OPTIONS); 

Answer 2

$ (« cellule-with-id. ») Sélectionnera le premier élément des matches. Mais ce dont vous avez besoin, c'est le td frère de l'élément cliqué. Au lieu d'utiliser 'each', vous pouvez utiliser un gestionnaire d'événement click. Et pourquoi avez-vous besoin d'un setInterwel? Cela déclenchera le showPopup à chaque 3000 ms. Même si l'utilisateur ferme le popup, il réapparaîtra.

$("tbody tr td.cell-which-triggers-popup").click(function() { 
     var cell_value = $(this).siblings(".cell-with-id").html(); 
     showPopup(cell_value)  

});

travail violon jsfiddle