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 モーダル プラグインを使用する必要があります。

「jquery modal plugin」または「javascript modal window」を Google で検索するだけで、無数のオプションが見つかります。最適なプラグインを選択してください。

于 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

HTML ではなく、Javascript アラート ボックスにテキストのみを表示できます。

ただし、div やテーブルなどの HTML コンテナーをアラートのように見せることはできます。
これが私が作った例です。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;
}

Jクエリ

    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 に答える