如何爲HTML表格中的每一行添加一個jQuery對話框

我正在用PHP生成一個HTML表格（使用codeigniter框架），並且我試圖添加一個鏈接來打開一個jQuery對話框，其中包含一些信息特定於該行。只需打開對話框的「更多信息」類型鏈接。如何爲HTML表格中的每一行添加一個jQuery對話框

當我將對話框div添加到該行並封裝所需的信息時，它會破壞表格（表格中不能有div）。

另外，它似乎我需要添加一個未知數量的jquery對話框函數聲明...我假設需要某種類型的函數，打開對話框的元素的ID以及ID對話框將傳遞給該函數。但是，似乎應該有這樣的東西內置到jQuery中的東西。

我錯過了什麼，如果有的話，是否有任何提示讓我指出正確的方向？

來源

2011-01-07 iddimu

爲什麼不按照要求創建一個對話框，並根據相關行填充正確信息？像這樣創建_x_對話框效率很低。 – 2011-01-07 02:58:17

您可以給出一個截圖或網址的例子，當你說對話時你會想到什麼？ – Matrym 2011-01-07 03:03:59

嵌入的信息元數據在該行，一拉......

<tr data-foo="additional data here" data-bar="even more data">…</tr>

而在你的JavaScript中，一個小魔術叫.live()：

$('#your_table .show_dialog').live('click', function(){ 
    var data_for_dialog = { 
    foo: $(this).closest('tr').attr('data-foo'), 
    bar: $(this).closest('tr').attr('data-bar') 
    } 

    show_dialog(data); // your own code to show the dialog 
});

如果您有<a>標記，並帶有「show_dialog」類。請注意，如果您有很多屬性或其中任何屬性都包含需要包含換行符的數據，則效率不高。您可以通過在該<tr>上定義的iterating over each attribute來改進此功能，並自動包含以data-開頭的屬性。儘管這個問題不在這個範圍之內。

至於顯示的對話框中，這樣的事情就足夠了：

function show_dialog(data) { 
    var $dialog = $('#dialog'); 
    for(var attr in data) { 
    $dialog.find("." + attr).html(data[attr]); 
    } 
    $dialog.show(); 
} 

<div id="dialog"> 
    <p class="data-foo"></p> 
    <p class="data-bar"></p> 
</div>

這是未經測試，但應說明所發生的事情不夠好。

注意：您可以在HTML5中定義自定義屬性，只要它們的前綴爲「data-」，因此可以顯示在上面的任何位置。

來源

2011-01-07 03:23:58 coreyward

我同意Tomalak的評論，使用一個框並更改其中的內容。如果你想做我認爲你正在嘗試做的事（看不到你的代碼），似乎你可能會將對話框div放在<table>標記中，而不是<td>標記，這將是首先要檢查的內容。

其次，打開你可以參考旁邊的鏈接DIV的對話框：

<table> 
    <tr> 
    <td> 
     <span class="MoreInfo">More info</span> 
     <div>stuff for dialog</div> 
    </td> 
    </tr> 
</table> 

$(document).ready(function(){ 
    $('.MoreInfo').next().dialog({ autoOpen: false }) 
    $('.MoreInfo').click(function(){ 
     $(this).next().dialog('open'); 
    }); 
});

編輯：對不起搞砸了Jquery的我假設你正在使用的JqueryUI Dialog

來源

2011-01-07 03:14:50 Kumu

謝謝kumu，我認爲這將工作完全符合我的需要...但是，.click（function（）{...我知道它是在前面的語句中正確設置對話框，因爲如果我將autoOpen設置爲當頁面加載完成時它會觸發，但是，我無法弄清楚爲什麼點擊時不能打開對話框。如果我在那裏放置了一個警報，它會觸發（'MoreInfo'）。點擊，所以我知道它正在捕捉事件。有什麼建議麼？ – iddimu 2011-01-07 05:09:24

如何爲HTML表格中的每一行添加一個jQuery對話框

回答

相關問題