如何在单击选项卡时将结果从sql显示到列表


How to show result from sql to list when click a tab?

我有一个SQL文件,它有一个表student_tb。在表中,我们有三列:student_id, student_name, and class_name。我们可以通过以下脚本创建SQL

CREATE TABLE `student_tb` (
  `student_id` int(11) NOT NULL,
  `student_name` varchar(128) NOT NULL,
  `class_name` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `student_tb` (`student_id`, `student_name`, `class_name`) VALUES
(1, 'John', 1),
(2, 'Herry', 2),
(3, 'Peter ', 1),
(4, 'Tom', 2);
ALTER TABLE `student_tb`
  ADD PRIMARY KEY (`student_id`);
ALTER TABLE `student_tb`
  MODIFY `student_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

我们可以通过脚本显示class_name=1,2或全部的学生名称

SELECT * FROM `student_tb` WHERE `class_name`=1
SELECT * FROM `student_tb` WHERE `class_name`=2
SELECT * FROM `student_tb`

我有一个连接SQL数据库的代码,并将其定位在html文件的顶部

<?php include "connect.php"; ?>
<?php       
    $sql  = "SELECT * FROM `student_tb` WHERE `class_name`=1";
    $result = mysqli_query($conn, $sql);        
?>

在HTML文件中,我有三个选项卡,用于显示sql中的学生结果,例如1班、2班的学生,等等

我使用下面的代码在列表中显示结果

<ul>
    <?php
        if (mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)) {
    ?>
        <a href="#"><li class="clearfix">
            <div class="w3-row-padding">                                                      
                <div class="w3-half">
                <p><?php echo $row["student_name"]; ?></p>              
                </div> 
                <div class="w3-half"> 
                <p><?php echo $row["class_name"]; ?></p>    
                </div>
            </div>    
        </li></a>
    <?php } 
    } ?>
</ul>

当我点击每个选项卡时,我想让一个代码显示结果。例如,当我点击选项卡"全部"时,结果将显示1班和2班的所有学生;当我点击标签"1班的学生"时,它将显示1班的所有学生。我该怎么做?我什么时候需要关闭sql连接?非常感谢。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Case</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">All students</a></li>
        <li><a data-toggle="tab" href="#menu1">Students in class 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Students in class 2</a></li>    
      </ul>
      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>All</h3>
          <p>List all students</p>
        </div>
        <div id="menu1" class="tab-pane fade">
          <h3>Class 1</h3>
          <p>List all students in class 1</p>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>Class 2</h3>
          <p>List all students in class 1</p>      
        </div>
      </div>
   
      </div>
    </body>
    </html>

Hi您可以将sql codefetch放在所有三个选项卡中,它们的条件如下

<?php   
   <?php include "connect.php"; ?>
?>
<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Case</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">All students</a></li>
        <li><a data-toggle="tab" href="#menu1">Students in class 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Students in class 2</a></li>    
      </ul>
      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>All</h3>
          <p>List all students</p>
          <ul>
    <?php
        $sql  = "SELECT * FROM student_tb";
    $result = mysqli_query($conn, $sql);   
        if (mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)) {
    ?>
        <a href="#"><li class="clearfix">
            <div class="w3-row-padding">                                                      
                <div class="w3-half">
                <p><?php echo $row["student_name"]; ?></p>              
                </div> 
                <div class="w3-half"> 
                <p><?php echo $row["class_name"]; ?></p>    
                </div>
            </div>    
        </li></a>
    <?php } 
    } ?>
</ul>
        </div>
        <div id="menu1" class="tab-pane fade">
          <h3>Class 1</h3>
          <p>List all students in class 1</p>
           <?php
        $sql  = "SELECT * FROM student_tb WHERE class_name=1";
    $result = mysqli_query($conn, $sql);   
        if (mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)) {
    ?>
        <a href="#"><li class="clearfix">
            <div class="w3-row-padding">                                                      
                <div class="w3-half">
                <p><?php echo $row["student_name"]; ?></p>              
                </div> 
                <div class="w3-half"> 
                <p><?php echo $row["class_name"]; ?></p>    
                </div>
            </div>    
        </li></a>
    <?php } 
    } ?>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>Class 2</h3>
          <p>List all students in class 2</p> 
           <?php
        $sql  = "SELECT * FROM student_tb WHERE class_name=2";
    $result = mysqli_query($conn, $sql);   
        if (mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)) {
    ?>
        <a href="#"><li class="clearfix">
            <div class="w3-row-padding">                                                      
                <div class="w3-half">
                <p><?php echo $row["student_name"]; ?></p>              
                </div> 
                <div class="w3-half"> 
                <p><?php echo $row["class_name"]; ?></p>    
                </div>
            </div>    
        </li></a>
    <?php } 
    } ?>     
        </div>
      </div>
      </div>
    </body>
    </html>