在jQuery中简单弹出多个表行? [英] Simple pop up in jQuery for multiple table rows?

问题描述

我想在表格中放置一个简单的弹出窗口，以显示有关每行的其他详细信息.我只想问一下有关如何在每一行中显示弹出窗口的想法.目前，仅针对第一个弹出窗口显示.

I would like to put a simple pop up in my table to display additional details regarding each row. I just want to ask for ideas on how to show the pop up in every row. Currently the pop up is only shown for the first one.

这是我的代码:

@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>

推荐答案

您应该使用公共类

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

然后，您可以使用类选择器(".class")

选择具有给定类的所有元素.

Selects all elements with the given 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;
});

这篇关于在jQuery中简单弹出多个表行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！