JQuery：迭代遍歷所有錶行，並顯示每個單元格的彈出窗口

使用JQuery，我試圖遍歷表中的所有行並顯示定時彈出窗口對於每個具有類的單元格 =「細胞其中，觸發，彈出」。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) 
      } 
     }); 
    }

來源

2017-09-14 Twobears

這是因爲對話與ID = 「彈出式」呈現的元素，只有一個。如果你想彈出多個對話框，你需要在每次創建新的元素：

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

來源

2017-09-14 22:50:29

嗨鄧肯 - 種類的作品謝謝你。但由於定時器功能而不斷循環。（見小提琴），仍然只顯示找到的第一行。 - http://jsfiddle.net/twobears/xaqtawog/491/ – Twobears

更改爲setTimeout並停止循環，但仍只返回第一個Trip ID。 - [jsfiddle]（http://jsfiddle.net/twobears/xaqtawog/492/） – Twobears

$（「細胞與-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

來源

2017-09-14 23:44:41

試圖顯示一個彈出窗口作爲無線電操作員的提醒，以檢查經過一段時間後越過危險酒吧的船的狀態。一旦船被清除，無線電操作員可以將狀態從'cell-which-triggers-popup'更改爲'open'（這不會觸發彈出） – Twobears

當無線電操作員改變狀態時，你必須使用'clearInterval（）'。在此之前，相同的彈出窗口會顯示。如何在同一個彈出窗口中顯示兩個旅程ID？ –

每次旅行Id都會涉及一艘可能在不同時間離開或穿過不同酒吧的單獨船隻，因此需要分別計時並使用自己的彈出式窗口進行識別。我試圖在每個船隻上有一個彈出窗口，在其單元格狀態更改爲'cell-which-triggers-popup'後的特定時間出現。 @Duncan Thacker – Twobears

JQuery：迭代遍歷所有錶行，並顯示每個單元格的彈出窗口

回答

相關問題