为AJAX-PHP-MySQL生成的表创建动态Div标签 - creating dynamic Div Tags for AJAX-PHP-MySQL generated table

<?php
  $q=$_GET["q"];
  $con = mysql_connect('localhost', 'root', '');
  if (!$con)
      {
        die('Could not connect: ' . mysql_error());
       }
mysql_select_db("world", $con);
$sql="SELECT * FROM country WHERE Code = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Code</th>
<th>Name</th>
<th>Continent</th>
<th>GNP</th>
<th>GNPOld</th>
</tr>";


while($row = mysql_fetch_array($result))
   {
     echo "<tr>";  
     echo "<td>" . $row['Code'] . "</td>";
     echo "<td>" . $row['Name'] . "</td>";
     echo "<td>" . $row['Continent'] . "</td>";
     echo "<td>" . $row['GNP'] . "</td>";
     echo "<td>" . $row['GNPOld'] . "</td>";
     echo "</tr>";
      }
    echo "</table>";
    mysql_close($con);
    ?>

上面是PHP，下面是相同的HTML，我正在mysql的样本世界数据库工作。

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","moviedetail.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<table width="100%" border="0">
  <tr>
    <td>
<select name="Country" onChange="showUser(this.value)">
    <option>Select Name</option>
    <?php
    mysql_connect('localhost','root','')
    or die ("could not connect DB");
    mysql_select_db('world')
     or die ("could not connect database");
    $query="select code, name from country order by name asc"
     or die ("query failed");
    $result=mysql_query($query);
    while(list($code, $name)=mysql_fetch_row($result)) {
        echo "<option value='"".$code."'">".$name."</option>";
    echo "<div id='"".$code."'">".$name."</div>";
    }
    ?>
</select>
</td>
    <td>
    <div id="txtHint"><b>Country info will be listed here.</b></div>
    </td> 
  </tr>
</table>
</body>
</html>

从表单和显示表中获取名称。我的另一组代码是:-

<?php
 for (;$i<$nrows;)
{   
     #add 1 so that numbers don't start with 0
      echo"<tr>'n";
    for ($j=0;$j<10&&$i<=$nrows;$j++)
    {
            $n = $i;
        $i=$i + 1;
        $k=$n%30;
        $row = mysqli_fetch_assoc($result);
        extract($row);
        echo "<td>
        <table>
        <tr>
                <td>$n</td>'n
        </tr>'n
        <tr>
            <td>$Name</td>'n
        </tr>'n
        <tr>'n
            <td>$Continent</td>'n
        </tr>'n
        <tr>'n
            <td>$Region</td>'n
        </tr>'n
        <tr>'n
                <td>$SurfaceArea</td>'n
        </tr>'n
        <tr>'n
            <td>$IndepYear</td>'n
        </tr>'n
            <tr>'n
            <td>$GNP</td>'n
        </tr>'n
        <tr>'n
            <td>$k</td>'n
        </tr>'n
    </table>'n

        </td>"; 
        if ($k==0)break 2;
    }
    echo"</tr>'n";


}
?>

和HTML的相关部分是

  <td><table border="1">
  <tr>
    <td>

        <?php
include ("/connections/query.php");
$nrows = mysqli_num_rows($result);
/* Display results in a table */
    echo "<table>'n
    <tr>'n";
            $i=1;
include ("/function/movietable.php");

    echo "</tr>'n
    </table>'n";

?>  

    </td>
    <td>&nbsp;</td>
  </tr>
</table></td>

我设计它没有什么困难。我想要一个鼠标悬停效果(如在前两组代码)显示有关每个国家表(整个)产生的最后两组代码列这是空白的代码上面的更多细节。我希望它始终显示在相同的位置，尽管页面移动

我还有一个简单的问题。正如你在上面看到的，我在30个结果处停止了查询。我想在底部添加一个show-more按钮，以便在同一页面上显示更多结果。

我是一个新手，所以如果你指出代码中的错误会很有帮助。

我建议您使用ezsql使查询数据库更容易:http://justinvincent.com/ezsql

和jquery:http://jquery.com/

这里有一个教程，向您展示如何在jquery中执行ajax调用:http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

从你的代码，我可以看到，你试图查询数据库使用$_GET变量。我假设你的搜索字段的名字是q。并使用javascript动态显示结果。

HTML:

<input type="text" id="q" name="q"/>
<div id="your_div"></div><!--this is where your html table will be loaded dynamically as you type a value on the textbox-->

JAVASCRIPT:

<script src="jquery.js"></script>
<script>
$(function(){
  $('#q').keyup(function(){
     var query = $.trim($(this).val());
     $('#your_div').load('phpfile.php', {'q' : query});
  });
});
</script>

PHP:

 //database configuration here
$q = mysql_real_escape_string($_POST['q']);
//html table here