Wie kann ich einen jQuery-Dialog für jede Zeile in einer HTML-Tabelle hinzufügen

Question

Ich erzeuge eine HTML-Tabelle mit PHP (mit dem Codeigniter-Framework) und ich versuche, einen Link, der ein Jquery-Dialog mit einigen Informationen öffnen wird ist spezifisch für diese Zeile. Eine Art "Mehr Info" -Typ, der den Dialog öffnet.

Wenn ich das Dialogfeld div dieser Zeile hinzufüge und die erforderlichen Informationen darin kapsle, bricht es die Tabelle (kann kein div in der Tabelle haben).

Plus, es scheint, ich müsste eine unbekannte Menge von jQuery Dialogfunktionen deklariert ... Ich nehme an, eine Art von Funktion benötigt wird und die ID des Elements, das den Dialog sowie die ID öffnet denn der Dialog würde an die Funktion übergeben werden. Aber es scheint, dass etwas in jQuery für so etwas eingebaut sein sollte.

Fehle ich etwas, und wenn ja, hat jemand irgendwelche Tipps, um mich in die richtige Richtung zu weisen?

Answer 1

einbetten die Informationen als Metadaten auf der Reihe, a la ...

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

Und in Ihrem Javascript, rief eine wenig Magie .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 
}); 

Wo Sie einen <a> Tag mit der Klasse "Show_Dialog" haben. Beachten Sie, dass dies nicht sehr effizient ist, wenn Sie viele Attribute haben oder einige Daten enthalten, die neue Zeilen enthalten müssen. Sie können dies verbessern, indem Sie iterating over each attribute auf diesem <tr> definiert und automatisch die Attribute beginnend mit data- einschließen. Das ist jedoch außerhalb des Rahmens dieser Frage.

Was den Dialog zeigt, so etwas wie dies würde ausreichen, um:

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> 

Das ungetestet ist, sollte aber zeigen, was gut genug geschieht.

Hinweis: Sie können benutzerdefinierte Attribute in HTML5 definieren, sofern ihnen das Präfix "data" vorangestellt ist.

Answer 2

Ich stimme Tomalaks Kommentar zu, eine Box zu verwenden und den Inhalt darin zu ändern. Wenn Sie das tun wollten, was Sie zu tun versuchen (ohne Ihren Code zu sehen), scheint es, dass Sie das Dialogfeld div im <table>-Tag anstelle eines <td>-Tags einfügen, das wäre das erste zu überprüfende Element.

Zweitens den Dialog öffnen Sie einfach den div neben dem Link verweisen können:

<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'); 
    }); 
}); 

Edit: Leider die JQuery Ich gehe davon aus Sie verkorkste werden mit dem JqueryUI Dialog