警报框以 html 表格格式显示数据库中的数据答案

【问题标题】：alertbox to show the data from database in html table Format警报框以 html 表格格式显示数据库中的数据
【发布时间】：2013-10-28 20:55:37
【问题描述】：

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

我想以 HTML 表格格式显示。谁能指导我如何做到这一点，

这是我的代码：

Ajax

$(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>";

【问题讨论】：

如果我可能会问，您为什么希望它显示在警报框中？这不适合更有效的模式吗？
感谢您的回复这是我的客户想要的，看看实例结果...

标签： javascript php html mysql ajax

【解决方案1】：

你似乎在使用 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" );
    }

});
});
});

【讨论】：

【解决方案2】：

您只能在 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(); 
    });

【讨论】：

【解决方案3】：

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

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

【讨论】：