How to add Hyperlink on php/html table that displays information from mysql database -

How to add Hyperlink on php/html table that displays information from mysql database -

i have next mysql table:

+----------+---------+------+--------------+ | 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 | +----------+---------+------+--------------+

where have written php script read mysql db:

<?php $con=mysqli_connect("example.com","peter","abc123","my_db"); // check connection if (mysqli_connect_errno()) { echo "failed connect mysql: " . mysqli_connect_error(); } $result = mysqli_query($con,"select name 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); ?>

which produces:

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

to display name, want name hyperlink when clicked brings corresponding data, example: when aardvark clicked, next info pop up

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

you'll have utilize css/javascript this.

there 3 ways: more easy way print data, not displaying yet until clicks link. hyperlink part. in illustration used 'span' element styled hyperlink.

//place within head tag <style> .hyperlink-lookalike { text-decoration:underline; color:blue; cursor:pointer; } </style> <script> //javascript function toggle 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 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>';

the sec way is, , 1 uses hyperlink, go detail view:

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

the 3rd (more advanced) way ajax request info , display in 'div' tag. might want utilize javascript library jquery. 1 time again if want show in popup hyperlink not necessary. span element onclick event fires javascript function request server more info easier.

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

php mysql