HTMLテーブル内の各行にjQueryダイアログを追加するにはどうすればいいですか？

Question

私はPHPでcodeigniterフレームワークを使用してHTMLテーブルを生成していますが、jQueryダイアログを開き、その行に固有です。単純にダイアログを開く「詳細情報」タイプのリンクを並べ替えます。

ダイアログボックスのdivをその行に追加し、必要な情報をカプセル化すると、テーブルが分割されます（テーブル内にdivを持つことはできません）。

さらに、未知数のjqueryダイアログ関数を追加する必要があるようです...私は関数のいくつかの並べ替えが必要であると仮定しています。また、ダイアログとIDを開く要素のIDダイアログが関数に渡されるためです。しかし、このようなもののためにjQueryに組み込まれたものがあるはずです。

私は何かが欠けていますか？誰かが私に正しい方向を指摘するヒントを持っていますか？

Answer 1

埋め込みコードを使用していると仮定しています行のメタデータ、ア・ラ...

<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」というクラスがあります。属性の数が多い場合や、改行を含む必要のあるデータが含まれている場合、これはあまり効率的ではありません。これを改善するにはiterating over each attributeに<tr>を定義し、自動的に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-」という接頭辞が付いている限り、カスタム属性を定義することができます。したがって、上のすべての箇所に表示されます。

Answer 2

私はTomalakのコメントに同意して1つのボックスを使用し、その内容を変更します。 あなたがしたいと思っていることをしたいと思えば（あなたのコードを見ることなく）、<td>タグの代わりに<table>タグのダイアログdivを置いているようです。第二に、あなただけのリンクの横の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