我有一個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>
把每個查詢每個輸出 – slashsharp
@slashsharp:你能做出更多通過使用代碼清除? – user3051460