如何通过单击表格内的按钮来显示另一个表格？

时间：2016-01-05 02:55:51

标签： javascript php html mysql

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我的表：

enter image description here

当我点击其中一个按钮时我要显示的内容：

enter image description here

我只想在点击其中一个列时显示另一个表格，并且必须准确无误（例如，点击公司C获取公司C的信息）。

尝试使用function() ---＆gt;失败

尝试使用if else ---＆gt;失败

1 个答案:

答案 0 :(得分：0)

您可能希望使用AJAX来实现您的目标。

提醒：mysql_*已经deprecated，因此您应该考虑使用mysqli_*。

首先，您需要在info3表的表格中列出您的数据，假设company表格有CompanyName列，以便将其连接到您的info3 } table的CompanyName列。

echo '<td> <button class="company_button">'.$row['CompanyName'].'</button></td>';

为单击按钮的返回数据创建div空间。

<div id="company_desc_div"></div>

然后我们可以使用jQuery（javascript库）创建一个脚本，您可以下载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 */
    }
  });

});

您可能会注意到，我们将点击按钮的数据传递给get_company_info.php，因此我们创建该文件：

<?php

  /* ESTABLISH YOUR CONNECTION */
  $con = new mysqli("localhost", "root", "", "vauban");

  /* CHECK CONNECTION */
  if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", 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 */

?>

我们从这个文件回显的是将返回给AJAX请求的内容。

相关问题
最新问题