如何通过单击表格内的按钮来显示另一个表格？
问题描述：
<html>
<body>
<form action="index.php" method="post">
<input type="text" name="search" placeholder="Search for members..." />
<input type="submit" value="search" />
</form>
</body>
</html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: middle;
}
</style>
<script type="text/javascript">
function showHide(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = '';
}
else {
document.getElementById(id).style.display = 'none';
}
}
</script>
</head>
<body>
<table border="1">
<?php
mysql_connect("localhost","root","") or die("could not connect");
mysql_select_db("vauban") or die("could not find database");
$output = '';
if(isset($_POST['search'])) {
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM info3 WHERE FirstName LIKE '%$searchq%' OR LastName LIKE '%$searchq%'") or die("could not search!");
$count = mysql_num_rows($query);
if($count == 0) {
$output = 'There was no search results!';
}else{
while($row = mysql_fetch_array($query)) {
$id = $row['Id'];
echo"<td>". $row['Id']."</td>";
echo"<td>". $row['FirstName']."</td>";
echo"<td>". $row['LastName']. "</td>";
echo"<td>". $row['PhoneNumber']. "</td>";
echo"<td> <button onclick=\"showHide('id'); return false;\">". $row['CompanyName']. "</button></td>";
echo"<td> <a href ='view.php?Id=$id'>Edit</a>";
echo"<td> <a href ='del.php?Id=$id'><center>Delete</center></a>";
echo "</tr>";
$CompanyName=$row['CompanyName'];
}
}
}
?>
</table>
<script type="text/javascript">
function showHide(id) {
$CompanyName=$row['CompanyName'];
if ($CompanyName = "Company A") {
<?php
echo "<table id='test1' style='width:50%' align='right'>";
include("db.php");
$result=mysql_query("SELECT * FROM company where no = '1'");
while($test = mysql_fetch_array($result))
{
$id = $test['No'];
echo "<th rowspan='1'>Company name</th>";
echo "<td colspan='3'>". $test['CompanyName']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Location</th>";
echo "<td colspan='3'>". $test['Location']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Found</th>";
echo "<td colspan='3'>". $test['Found']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Website</th>";
echo "<td colspan='3'>". $test['Website']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th rowspan='3'>Contact</th>";
echo "<th>Email</th>";
echo "<td colspan='3'>". $test['Email']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Phone</th>";
echo "<td colspan='3'>". $test['Phone']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Fax</th>";
echo "<td colspan='3'>". $test['Fax']. "</td>";
echo "</tr>";
echo "<br>";
}
mysql_close($conn);
?>
</table>
}
else if ($CompanyName = "Company B") {
<?php
echo "<table id='test2' style='width:50%' align='right'>";
include("db.php");
$result=mysql_query("SELECT * FROM company where no = '2'");
while($test = mysql_fetch_array($result))
{
$id = $test['No'];
echo "<th rowspan='1'>Company name</th>";
echo "<td colspan='3'>". $test['CompanyName']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Location</th>";
echo "<td colspan='3'>". $test['Location']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Found</th>";
echo "<td colspan='3'>". $test['Found']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Website</th>";
echo "<td colspan='3'>". $test['Website']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th rowspan='3'>Contact</th>";
echo "<th>Email</th>";
echo "<td colspan='3'>". $test['Email']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Phone</th>";
echo "<td colspan='3'>". $test['Phone']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Fax</th>";
echo "<td colspan='3'>". $test['Fax']. "</td>";
echo "</tr>";
echo "<br>";
}
mysql_close($conn);
?>
</table>
}
else if ($CompanyName= "Company C") {
<?php
echo "<table id='test3' style='width:50%' align='right'>";
include("db.php");
$result=mysql_query("SELECT * FROM company where no = '3'");
while($test = mysql_fetch_array($result))
{
$id = $test['No'];
echo "<th rowspan='1'>Company name</th>";
echo "<td colspan='3'>". $test['CompanyName']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Location</th>";
echo "<td colspan='3'>". $test['Location']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Found</th>";
echo "<td colspan='3'>". $test['Found']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Website</th>";
echo "<td colspan='3'>". $test['Website']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th rowspan='3'>Contact</th>";
echo "<th>Email</th>";
echo "<td colspan='3'>". $test['Email']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Phone</th>";
echo "<td colspan='3'>". $test['Phone']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Fax</th>";
echo "<td colspan='3'>". $test['Fax']. "</td>";
echo "</tr>";
echo "<br>";
}
mysql_close($conn);
?>
</table>
}
else if ($CompanyName = "Company D") {
<?php
echo "<table id='test4' style='width:50%' align='right'>";
include("db.php");
$result=mysql_query("SELECT * FROM company where no = '4'");
while($test = mysql_fetch_array($result))
{
$id = $test['No'];
echo "<th rowspan='1'>Company name</th>";
echo "<td colspan='3'>". $test['CompanyName']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Location</th>";
echo "<td colspan='3'>". $test['Location']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Found</th>";
echo "<td colspan='3'>". $test['Found']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Website</th>";
echo "<td colspan='3'>". $test['Website']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th rowspan='3'>Contact</th>";
echo "<th>Email</th>";
echo "<td colspan='3'>". $test['Email']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Phone</th>";
echo "<td colspan='3'>". $test['Phone']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Fax</th>";
echo "<td colspan='3'>". $test['Fax']. "</td>";
echo "</tr>";
echo "<br>";
}
mysql_close($conn);
?>
}
else {
alert("No such company exist...");
}
}
</script>
</body>
</html>My table:
and what I want to display when I click on one of the button:
I just want to display another table when I click on one of the column and it has to be accurate (e.g. click Company C to get information of Company C).
Tried using function() ---> fail
Tried using if else ---> fail
</div>
答
You may want to use AJAX in order to achieve what you want.
Reminder: mysql_* is already deprecated, so you should consider mysqli_* instead.
First is, you need to list down your data in a table from info3 table, assuming that company table has CompanyName column in order to connect it to your info3 table's CompanyName column.
echo '<td> <button class="company_button">'.$row['CompanyName'].'</button></td>';
And create a div space for returned data of the clicked button.
<div id="company_desc_div"></div>
Then we can create a script using jQuery (javascript library) which you can download here.
$(document).on("click", ".company_button", function(){ /* WHEN A BUTTON IS CLICKED */
var company_desc = $(this).text(); /* GET WHAT COMPANY IS IT */
$.ajax({ /* START AJAX */
type: "POST", /* METHOD TO USE TO PASS THE DATA */
url: "get_company_info.php", /* FILE WHERE WE WILL PROCESS THE PASSED ON DATA */
data: { "company_desc": company_desc }, /* DATA TO BE PASSED ON */
success: function(result){ /* GET THE RETURNED DATA FROM get_company_info.php */
$("#company_desc_div").html(result); /* PUT THE RETURNED DATA TO company_desc_div DIV */
}
});
});
As you might notice, we pass the data of the clicked button to get_company_info.php, so lets create that file:
<?php
/* ESTABLISH YOUR CONNECTION */
$con = new mysqli("localhost", "root", "", "vauban");
/* CHECK CONNECTION */
if (mysqli_connect_errno()) {
printf("Connect failed: %s
", mysqli_connect_error());
exit();
}
if($stmt = $con->prepare("SELECT CompanyName, Location, Found, Website, Email, Phone, Fax FROM company WHERE CompanyName = ?")){ /* PREPARE THE STATEMENT */
$stmt->bind_param("s", $_POST["company_desc"]); /* BIND THE PASSED ON DATA TO THE SELECT QUERY */
$stmt->execute(); /* EXECUTE THE QUERY */
$stmt->bind_result($companyname, $location, $found, $website, $email, $phone, $fax); /* BIND THE RESULT TO THESE VARIABLES */
$stmt->fetch(); /* FETCH THE RESULTS */
/* WHAT YOU ECHO IS WHAT WILL BE RETURNED TO THE AJAX REQUEST */
echo '<table>
<tr>
<th>Company name</th>
<td colspan="3">'.$companyname.'</td>
</tr>
<tr>
<th>Location</th>
<td colspan="3">'.$location.'</th>
</tr>
<tr>
<th>Found</th>
<td colspan="3">'.$found.'</td>
</tr>
<tr>
<th>Website</th>
<td colspan="3">'.$website.'</td>
</tr>
<tr>
<th rowspan="3">Contact</th>
<th>Email</th>
<td>'.$email.'</td>
</tr>
<tr>
<th>Phone</th>
<td colspan="3">'.$phone.'</td>
</tr>
<tr>
<th>Fax</th>
<td colspan="3">'.$fax.'</td>
</tr>
</table>';
$stmt->close();
} /* END OF PREPARED STATEMENT */
?>
What we echo from this file is what will be returned to the AJAX request.