Question

我想在这里创建像这样的节目：

http://www.w3schools.com/PHP/php_ajax_database.asp

但是代替示例中显示的下拉列表，是否可以将其更改为表格式，例如，当我单击Class 1时，它将显示类1的详细信息...详细信息在我的数据库中它来自phpmyadmin：

提前致谢...非常感谢

这是对的吗？

<?php
include ('staffheader.php');
?>
<div id="head">Permit Structure</div>
<div class="contents">
<div id="class_data">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Road Based</td>
<td>Proving Ground PG</td>
<td>Off Road OR</td>
<td>Towing TT</td>
</tr>
<tr id="Class_1">
<td> <a href='#' class='classlink' title='1'>Class 1</a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Class 2</td>
<td>CAT 2PG</td>
<td>CAT 1OR</td>
<td>CAT 2TT</td>
</tr>
<tr>
<td>Class 3</td>
<td>CAT 3PG</td>
<td>CAT 2OR</td>
<td>CAT 3TT</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>CAT 4PG</td>
<td>CAT 3OR</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="instruction">Click on the Class or Category to view information on it</div>
</div>
<div id='detailtable'></div>
<?php
include('allfooter.php');
?>

loadergetclassinfo.php：

<?php
$class_id = empty($_POST["class_id"]) ? 1 : $_POST["class_id"];
   $con = mysql_connect("localhost", "root", "cailing8195") or die ("Unable to connect to MySQL Server " . mysql_error()); 
if(is_resource($con))
    $db = mysql_select_db("jlr", $con) or die( "Unable to select database " . mysql_error());
$query = "SELECT PTYPE, TYPE, PREREQ, DES FROM type WHERE TYID=" . $class_id;
$res = mysql_query($query);
$arr_data = mysql_fetch_assoc($res);
mysql_close($con);

foreach ($arr_data as $data)
$html = "<table>\n";
$html .= "<tr><th>Type ID</th><th>Permit Type</th><th>Categories</th><th>Pre-Requisisite</th><th>Description</th></tr>\n";
$html .= "<tr><td>" . $class_id . "</td><td>" . $data['PTYPE'] . "</td><td>" .    $data['TYPE'] . "</td><td>" . $data['PREREQ'] . "</td><td>" . $data['DES'] . "</td>    </tr>\n";
 $html .= "</table>\n";

echo $html;
?>

JQuery（在javascript.js中）：

 $(function() {
$('a.class_link').click(function() {
    var class_id = $(this).attr('title');
    $.post("loadergetclassinfo.php", {class: class_id}, function(result){
    $('#detail_table').html(result);
    });
   });
});

我也在我的标题php文件中添加了这个：

  <script src="javascript.js"></script>
 <script type='text/javascript'     src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

Answer 1

如果你想要点击链接的行，用数据库中的数据填充，请执行以下操作（未经测试，但这里是要点）：

HTML：

<tr id='class_1'>
    <td><a href='#' class='classlink' title='1'>Class 1</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>

jQuery的：

$(function() {
    $('a.classlink').click(function() {
        var class_id = $(this).attr('title');
        $.post("loadergetclassinfo.php", {class_id: class_id}, function(result){
            $('#class_' + class_id).html(result);
        });
    });
});

loadergetclassinfo.php：

<?php
    $class_id = empty($_POST["class_id"]) ? 1 : $_POST["class_id"];
    $con = mysql_connect("localhost", "your_MySQL_username", "your_MySQL_password") or die ("Unable to connect to MySQL Server " . mysql_error()); 
    if(is_resource($con))
        $db = mysql_select_db("your_MySQL_database", $con) or die( "Unable to select database " . mysql_error());
    $query = "SELECT data1, data2, data3 FROM your_data_table WHERE class=" . $class_id;
    $res = mysql_query($query);
    $arr_data = mysql_fetch_assoc($res);
    mysql_close($con);

    $html = "<td><a href='#' class='classlink' title='$class_id'>Class $class_id</a></td>";
    foreach ($arr_data as $data)
        $html .= "<td>" . $data . "</td>\n";

    echo $html;
?>

更新：

如果您希望'Class x'数据出现在HTML页面的其他位置，您可以执行以下操作：

将此添加到您的HTML：

<div id='class_data'></div>

更改上面的jQuery：

$.post("loadergetclassinfo.php", {class: class_id}, function(result){
    $('#class_data').html(result);
});

将上面的PHP代码更改为类似的内容（或者您可以使用列表或您喜欢的任何内容）：

$html = "<table>\n";
$html .= "<tr><th>Class Number</th><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>\n";
$html .= "<tr><td>" . $class_id . "</td><td>" . $data['data1'] . "</td><td>" . $data['data2'] . "</td><td>" . $data['data3'] . "</td></tr>\n";
$html .= "</table>\n";

echo $html;

这假设您有名为data1等的列，并且您的主索引称为“class”。只需将其更改为您的情况。

对您的编辑做出回复更新：

结束您的HTML代码：

<div id='detailtable'></div>

编辑此jQuery语句：

$.post("loadergetclassinfo.php", {class: class_id}, function(result){
    $('#detailtable').html(result);
});

最后，从HTML表格下方删除php代码，并将其放在与HTML文件相同的目录中名为“loadergetclassinfo.php”的文件中。

此外，这是错误的（抱歉，错误出现在我的代码中）：

$class_id = empty($_POST["class_id"]) ? 1 : $_POST["class"];

应该是：

$class_id = empty($_POST["class_id"]) ? 1 : $_POST["class_id"];

同时将详细信息表格代码更改为：

$html = "<table>\n";
$html .= "<tr><th>Type ID</th><th>Permit Type</th><th>Categories</th><th>Pre-    Requisisite</th><th>Description</th></tr>\n";
$html .= "<tr><td>" . $class_id . "</td><td>" . $data['PTYPE'] . "</td><td>" .     $data['TYPE'] . "</td><td>" . $data['PREREQ'] . "</td><td>" . $data['DES'] . "</td></tr>\n";
$html .= "</table>\n";

Answer 2

你可以尝试使用jquery中的ajax函数，你可以再修改它。

 <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tr>
            <td>Road Based</td>
            <td>Proving Ground PG</td>
            <td>Off Road OR</td>
            <td>Towing TT</td>
            </tr>
            <tr>
            <td onclick="getPage(this)" >Class 1</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            </tr>
            <tr>



        <div id='content'></div>
        <script type="text/javascript">
        function getPage(class) {
            //generate the parameter for the php script
            var data = 'page=' + document.location.hash.replace(/^.*#/, '');
            $.ajax({
                url: "loadergetclassinfo.php", 
                type: "GET",       
                data: (class).innerText,    
                cache: false,
                success: function (html) { 
                    //add the content retrieved from ajax and put it in the #content div
                    $('#content').html(html);  
                    //display the body with fadeIn transition
                    $('#content').fadeIn('slow');      
                }      
            });
        }
</script>

修改AJAX PHP数据库示例

2 个答案: