2016-07-25 62 views
0

我有一個SQL文件,有一個表student_tb。在表中,我們有三列:student_id, student_name, and class_name。我們可以通過創建SQL下面的腳本如何顯示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>

+1

把每個查詢每個輸出 – slashsharp

+0

@slashsharp:你能做出更多通過使用代碼清除? – user3051460

回答

1

你好你可以把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> 
+0

謝謝,這是正確的。我在哪裏需要關閉sql連接? – user3051460

+0

@ user3051460是的,它是正確的,你可以把mysqli_connect($ conn);在html頁的底部 – user1234

+0

謝謝。我認爲你的意思是mysqli_close($ conn)。我只是有一個小問題。爲了保護我的代碼。我可以將上面的php腳本寫入其他文件並在html中調用它。因爲如果我在index.php中編寫所有東西,有人可以看到我的作品 – user3051460

相關問題