我有一个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 code
到fetch
放在所有三个选项卡中,它们的条件如下
<?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>