JQuery：迭代遍历所有表行，并显示每个单元格的弹出窗口

Question

使用JQuery，我试图遍历表中的所有行并显示定时弹出窗口对于每个具有类的单元格 =“细胞其中，触发，弹出”。

下面的JQuery函数仅显示找到的第一个单元格的弹出窗口。我怎样才能得到它显示该类的每个单元格的弹出窗口。

我这里有一个工作的例子 - 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

这是因为对话与ID = “弹出式” 呈现的元素，只有一个。如果你想弹出多个对话框，你需要在每次创建新的元素：

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

Answer 2

$（“细胞与-ID”）将选择从比赛的第一要素。但是你需要的是单击元素的同胞td。您可以使用点击事件处理程序，而不是使用“每个”。为什么你需要一个setInterwel？这将在每3000毫秒触发showPopup。即使用户关闭弹出窗口，它也会重新出现。

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

}）;

工作小提琴jsfiddle