0

我正在创建一个带有按钮的图像映射。按钮由 php 创建：

while($pc = mysql_fetch_array($result)){
if ($pc['Online_Status']==0){
    $class = 'workstation-offline';
}
else{
    $class = 'workstation-online';
}


echo "\r\n\t\t\t".'<button class="'.$class.'" id="'.$pc['PCID'].'" title= "'.$pc['PCID'].'>';
}

当页面加载时，traverse.php 指示按钮将是什么类。在我的 CSS 中，workstation-offline 将为绿色，如果离线则为红色。traverse.php 还从数据库加载数据。

这是html代码：

<div class="image_map" style="background-image: url('image.jpg');">
    <?php 
        include("traverse.php"); 
    ?>

</div>

我想要发生的是，当单击按钮时，将打开一个对话框并在表格中显示有关 ID 为“pc ['PCID']”的工作站的数据：

<h3>"The ID of the Button"</h3>
<table>
    <tr>
        <td>IP Address</td>
        <td>pc['ipAddress']</td>
    </tr>
    <tr>
        <td>MAC Address</td>
        <td>pc['macAddress']</td>
    </tr>
    <tr>
        <td>Other Info</td>
        <td>pc['otherInfo']</td>
    </tr>
</table>

如何使用 js/jquery 做到这一点？

4

1 回答 1

0

我会使用 jquery-ui 模态对话框。( http://jqueryui.com )

您可以像这样动态加载数据。这是一个用于创建对话框然后从服务器端页面加载数据的按钮的单击处理程序：

$(document).ready(function () {
    $('.workstation-online,.workstation-offline').click(function () {
        var url = "put the url to obtain info from database here";
        var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
            dialog.dialog({
                resizable: false,
                width: 400,
                height: 300,
                modal: true,
                closeText: '',
                close: function (event, ui) {
                    // remove div with all data and events
                    dialog.remove();
                }
            });
            dialog.load(
                url,
                function (responseText, textStatus, XMLHttpRequest) {
                    // remove the loading class
                    dialog.removeClass('loading');
                }
            );
            return false;
    });
});
于 2013-04-04T13:51:37.803 回答