douliangli6407
douliangli6407
2016-01-05 02:55
浏览 212

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

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

enter image description here

and what I want to display when I click on one of the button:

enter image description here

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douzhimao8656
    douzhimao8656 2016-01-05 05:17
    已采纳

    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.

    点赞 评论

相关推荐