3

我正在尝试在 HTML 表中显示数据库中的数据，我想在警报框中显示此 html 表，现在它在警报框内显示数据但不像 html 表那样显示，现在我的警报框显示像这个：

在此处输入图像描述

我想以 HTML 表格格式显示它。任何人都可以指导我如何做到这一点，

这是我的代码：

阿贾克斯

$(document).ready(function() {

    $("#display").dblclick(function() {                

      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "supplierprice/retrieve.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").html(response); 
          alert(response);
        }

    });
});
});

HTML

<td><input type="button" id="display" value="" /></td>

Retrieve.php：

include"config.php";
$result=mysql_query("select * from supplierpricehistory");

echo "<table border='1' >
<tr>
<td align=center> <b>supplier</b></td>
<td align=center><b>country</b></td>
<td align=center><b>networkname</b></td>
<td align=center><b>mcc</b></td></td>
<td align=center><b>mnc</b></td>
<td align=center><b>newprice</b></td>       
<td align=center><b>oldprice</b></td>       
<td align=center><b>status</b></td>     
<td align=center><b>date</b></td>           
<td align=center><b>user</b></td>";

while($data = mysql_fetch_row($result))
{   
    echo "<tr>";
    echo "<td align=center>$data[1]</td>";
    echo "<td align=center>$data[2]</td>";
    echo "<td align=center>$data[3]</td>";
    echo "<td align=center>$data[4]</td>";
    echo "<td align=center>$data[5]</td>";
    echo "<td align=center>$data[6]</td>";
    echo "<td align=center>$data[7]</td>";
    echo "<td align=center>$data[8]</td>";
    echo "<td align=center>$data[9]</td>";
    echo "<td align=center>$data[10]</td>";

    echo "</tr>";
}
echo "</table>";
4

3 回答 3

5

您不能在浏览器的警告框中显示 html 内容。您需要使用 Javascript 模态插件。

只需在 Google 上搜索“jquery modal plugin”或“javascript modal window”，您就会发现无数选项。选择最适合您的插件。

于 2013-10-20T10:32:56.993 回答
0

当您似乎使用 jQuery 时，请尝试使用 jQueryui 对话框：http: //jqueryui.com/dialog/

添加 js 和 css jqueryui 文件：

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

编辑您的 html ：

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

然后添加 javascript 来处理您的对话框。

$(document).ready(function() {
 $( "#dialog" ).dialog({autoOpen: false});

$("#display").dblclick(function() {                

  $.ajax({    //create an ajax request to load_page.php
    type: "GET",
    url: "supplierprice/retrieve.php",             
    dataType: "html",   //expect html to be returned                
    success: function(response){                    
        $("#responsecontainer").html(response); 
        $("#dialog").dialog( "open" );
    }

});
});
});
于 2013-10-20T10:41:43.680 回答
0

您只能在 Javascript 警报框中显示文本，而不是 HTML。

不过，您可以使 HTML 容器（如 div 或表格）看起来像警报。
这是我做的一个例子。http://jsfiddle.net/Ur5Xn/

CSS

 #alert{
    border:1px solid #000;
    display:none;
    position:fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    height:100px;
    width:200px;
}
.back{
    opacity:0.5;
}

jQuery

    function showAlertBox(){
     $("#alert").css("display","inherit");
     $("#content").addClass("back");
    }
    function removeAlertBox(){
        $("#alert").css("display","none");
         $("#content").removeClass("back");        
    }

    $("#alertClose").click(function(){
       removeAlertBox(); 
    });
    $("#alertShow").click(function(){
       showAlertBox(); 
    });
于 2013-10-20T10:55:41.457 回答