在jQuery中簡單彈出多個表行？

Question

我想在表格中放置一個簡單的彈出窗口，以顯示有關每行的其他詳細信息。 我只想問一下有關如何在每一行中顯示彈出窗口的想法。 當前僅針對第一個顯示彈出窗口。

這是我的代碼：

@foreach (var name in Model){
<table>
        <tr>
                 <td>Name</td>
                <td>  <button id="@name.id">Show</button></td>
        </tr>
</table>
}

腳本：

 <script type="text/javascript">
$(function() {
    $('#').click(function() { //what should I put in the #? considering that it would have different id's?
        $("#popupdiv").dialog({
            title: "jQuery Popup from Server Side",
            width: 430,
            height: 250,
            modal: true,
            buttons: {
                Close: function() {
                    $(this).dialog('close');
                }
            }
        });
        return false;
    });
})

查看流行音樂：

<div id="popupdiv" title="Basic modal dialog" style="display: none">
                <b> Welcome </b>
</div>

Answer 1

你應該使用一個普通的類

<td> <button id="@name.id" type="button" class='popup-launcher'>Show</button></td>

然后您可以使用類選擇器（“ .class”）

選擇具有給定類的所有元素。

腳本

$('.popup-launcher').click(function() {
    //You can access elements id using this object
    var id = this.id;

   //Rest of your code
    $("#popupdiv").dialog({
        title: "jQuery Popup from Server Side",
        width: 430,
        height: 250,
        modal: true,
        buttons: {
            Close: function() {
                $(this).dialog('close');
            }
        }
    });
    return false;
});

Answer 2

$('button').click(function () {
    var row = $(this).closest('tr').index();
    alert('In row ' + row)
    //$('table').find('tr:eq('+row+')').find('td:nth-child(1)');
    //pop code here 
})

小提琴

這樣，您可以獲得單擊按鈕的行的所有數據