Question

我有以下MYSQL表：

+----------+---------+------+--------------+
| name     | cost    | life | whenacquired |
+----------+---------+------+--------------+
| aardvark | 2500.00 |    5 | 2012-01-01   |
| bobcat   | 2000.00 |    4 | 2012-03-01   |
| cougar   | 3000.00 |    6 | 2013-01-01   |
| deer     | 5000.00 |    4 | 2010-01-01   |
| eagle    | 2000.00 |    3 | 2009-01-01   |
+----------+---------+------+--------------+

我写了一个php脚本来从MySQL db中读取：

<?php
 $con=mysqli_connect("example.com","peter","abc123","my_db");
 // Check connection
 if (mysqli_connect_errno()) {
   echo "Failed to connect to MySQL: " . mysqli_connect_error();
 }

 $result = mysqli_query($con,"SELECT name FROM animals");

 echo "<table border='1'>
 <tr>
 <th>name</th>
 </tr>";

 while($row = mysqli_fetch_array($result)) {
   echo "<tr>";
   echo "<td>" . $row['name'] . "</td>";
   echo "</tr>";
 }

echo "</table>";

 mysqli_close($con);
 ?>

产生：

    +----------+
    | name     |
    +----------+
    | aardvark |
    | bobcat   |
    | cougar   |
    | deer     |
    | eagle    |
    +----------+

显示名称，但是我希望name是一个超链接，点击后会显示相应的数据，例如：点击aardvark时，会弹出以下信息

    +----------+---------+------+--------------+
    | name     | cost    | life | whenacquired |
    +----------+---------+------+--------------+
    | aardvark | 2500.00 |    5 | 2012-01-01   |
    +----------+---------+------+--------------+

Answer 1

你必须使用css / javascript来执行此操作。

有三种方法：更简单的方法是打印所有数据，但只是在有人点击链接之前才显示它。对于超链接部分。在这个例子中，我使用了一个'span'元素，它的样式就像一个超链接。

//place inside your head tag
<style>
.hyperlink-lookalike
{
    text-decoration:underline;
    color:blue;
    cursor:pointer;
}
</style>
<script>
//javascript function to toggle extra animal info
function show_extra_info(id)
{
   var tr = document.getElementById('extra_info_'+id);
   if(tr.style.display=='none')
   {
      tr.style.display='table-row';
   }
   else{
      tr.style.display='none';
   }
}
</script>

//inside the loop
echo '<tr>';
echo '<td colspan='2'><span class="hyperlink-lookalike" onclick="show_extra_info(' . $row['id'] . ')">' . $row['name'] . '</span></td>';
echo '</tr>';
echo '<tr id="extra_info_' . $row['id'] . '" style="display:none;">';
echo '<td>' . $row['cost'] . '</td>';
echo '<td>' . $row['life'] . '</td>';
echo '</tr>';

第二种方式是，这个使用超链接，转到详细视图：

echo '<td><a href="http://www.example.com/animaldetailedinfo.php?id=' . $row['id'] . '">' . $row['name'] . '</a></td>';

第三种（更高级）方法是执行AJAX请求以获取信息并在“div”标记中显示。为此你可能想使用像jquery这样的javascript库。再次，如果您希望它显示在弹出窗口中，则不需要超链接。带有onclick事件的span元素可以更轻松地触发javascript函数，该函数向服务器发出请求以获取更多信息。

$.get("http://www.example.com/animaldetailedinfo.php", function( data ) {
  $( "#popupcontainer" ).html( data );
});

如何在php / html表上添加超链接，显示来自mysql数据库的信息

1 个答案: