我的头文件中有一个 JQuery 脚本，但它对 html 正文没有影响。
头文件代码
<?php
include('/templates/header.php');
$host = "localhost"; // Host name
$username = "root"; // Mysql username
$password = ""; // Mysql password
$db_name = "datacentre"; // Database name
$tbl_name = "data_centre_users"; // Table name
$server_name = "localhost";
// Create connection
$con = new mysqli($server_name, $username, $password, $db_name, 3306);
if($con->connect_error){
die("Connection failed: ".$con->connect_error);
}
// Check connection
if($con->connect_error){
die("Connection failed: ".$conn->connect_error);
}
$sql = "SELECT * FROM $tbl_name ";
$result = $con->query($sql);
<table >
<thead>
<tr class="header">
<th class="center"><strong>ID</strong></th>
<th class="center"><strong>FirstName</strong></th>
<th class="center"><strong>Lastname</strong></th>
<th class="center"><strong>Department</strong></th>
<th class="center"><strong>Unit</strong></th>
<th class="center"><strong>Request</strong></th>
<th class="center"><strong>Purpose</strong></th>
<th class="center"><strong>Description</strong></th>
<th class="center"><strong>Status</strong></th>
<th class="center"><strong>Approved / Denied By</strong></th>
</tr>
</thead>
<?php
if($result->num_rows > 0){
// output data of each row
while($rows = $result->fetch_assoc()){ ?>
<tbody>
<tr>
<td class="center"><?php echo $rows['id']; ?></td>
<td class="center"><?php echo $rows['first_name']; ?></td>
<td class="center"><?php echo $rows['last_name']; ?></td>
<td class="center"><?php echo $rows['department']; ?></td>
<td class="center"><?php echo $rows['unit']; ?></td>
<td class="center"><?php echo $rows['request']; ?></td>
<td class="center"><?php echo $rows['purpose']; ?></td>
<td class="center"><?php echo $rows['description']; ?></td>
<td class="center"><?php echo $rows['status']; ?></td>
<td class="center"><?php echo $rows['approved_by']; ?></td>
</tr>
</tbody>
<?php
}
}
?>
</table>
<?php
$con->close();
include('/templates/footer.php');
?><!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="jquery-1.11.3.min.js"></script>
<script>
$('table').on('scroll', function () {
$("table > *").width($("table").width() + $("table").scrollLeft());
});
</script>
</head>
<div>
<body>
<header>
<a href="/datacentre/admin/index.php" title="Return to the homepage" id="logo">
</header>
the body code
<!-- begin snippet: js hide: false -->CSS 代码
/* CSS reset */
{
margin: 0;
padding: 0;
}
/* to create a sticky footer */
footer {
height: 25px;
position: fixed;
bottom: 0;
width: 100%
}
/* styling the tables */
table {
border-radius: 20px;
background-color: transparent;
color: black;
width: 500px;
text-align: left;
border-collapse: collapse;
overflow-x: scroll;
display: block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
}
td,
th {
border: 1px solid #999;
padding: 0.5rem;
text-align: left;
}
tbody tr:nth-child(odd) {
background: #eec;
}
td:hover {
/* th:hover also if you wish */
background: #aef;
}
tbody tr:hover {
/* th:hover also if you wish */
background: #bdf;
}
td {
border-top: 1px solid #FB7A31;
border-bottom: 1px solid FB7A31;
}
th {
padding: 0 5em 0 0.5em;
background-color: #ffc;
border-top: 1px solid #FB7A31;
border-bottom: 1px solid #FB7A31;
}
caption {
font-size: 1.2 em;
font-weight: bold;
}
.center {
text-align: center;
}
#last-row {
border-bottom: 1px solid #FB7A31;
}
section#content {
display: block;
min-width: 95%;
min-height: 80%;
}
div#scroll-table {
overflow: auto;
overflow-x: scroll;
overflow-y: scroll;
minimum-width: 99%;
height: 350px;
}
table {
border-collapse: collapse;
margin: auto;
width: 70%;
}
td {
border-top: 1px solid #FB7A31;
border-bottom: 1px solid FB7A31;
}
th {
padding: 0 5em 0 0.5em;
background-color: #ffc;
border-top: 1px solid #FB7A31;
border-bottom: 1px solid #FB7A31;
}
caption {
font-size: 1.2 em;
font-weight: bold;
}
.center {
text-align: center;
}
#last-row {
border-bottom: 1px solid #FB7A31;
}
th div {
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}那么如何在头文件中包含 jquery 脚本。
最佳答案
首先，在 html 表代码开始之前我没有看到结束 php 标签。 其次，如果您的 $rows 是按顺序放置的，您可能需要使用“foreach”或“for index to n”。
最后，我认为问题应该标题为“如何包含 php 文件作为模板”
关于javascript - 全局 PHP 头文件中的 JQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32707010/