收藏
批改狀態(tài)：合格
老師批語：把課堂代碼全部復(fù)制上來, 連注釋也不刪除原樣照搬, 這樣不行, 要有自己的想法
根據(jù)老師上課代碼改的，所以只貼出了show.php代碼部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最新影視劇介紹</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
}
thead > tr{
background-color: lightblue;
}
ul, li {
padding: 0;
margin: 5px auto;
list-style: none;
text-align: center;
overflow: hidden;
}
li {
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid black;
margin-left: 3px;
}
li:hover {
background-color: lightblue;
cursor: pointer;
}
/*設(shè)置當前頁高亮樣式*/
.active {
background-color: lightblue;
}
</style>
</head>
<body>
<table>
<caption>最新影視劇介紹</caption>
<thead>
<tr>
<th>序號</th>
<th>片名</th>
<th>簡介</th>
</tr>
</thead>
<tbody id>
<!-- 這里顯示影視信息列表-->
</tbody>
</table>
<ul>
</ul>
</body>
</html>
<script>
// 獲取表格顯示區(qū)
var tbody = document.getElementsByTagName('tbody').item(0);
// 獲取頁碼顯示區(qū)
var ul = document.getElementsByTagName('ul').item(0);
var pages='';
// 當前頁碼: 默認顯示第一頁
var p = <?=$_GET['p'] ?? 1?>;
// 創(chuàng)建 Ajax對象
var request = new XMLHttpRequest();
// 監(jiān)聽文檔的load事件,在頁面加載完成后通過Ajax方式獲取數(shù)據(jù)
window.addEventListener('load', showData(), false);
// load事件方法
function showData() {
// 監(jiān)聽Ajax成功回調(diào)
request.addEventListener('readystatechange', getData, false);
// 配置請求
request.open('GET', 'get_movies.php?p='+p, true);
// 發(fā)送請求
request.send(null);
}
function getData() {
if (request.readyState === 4) {
// console.log(request.responseText);
// 1. 獲取Ajax返回的數(shù)據(jù)并解析為JavaScript變量
var obj = JSON.parse(request.responseText);
pages = obj['pages'];
var movies = obj['movies'];
// 2. 生成表格數(shù)據(jù)
var str = '';
movies.forEach(function (movie) {
str += '<tr>';
str += '<td>' + movie['mov_id']+ '</td>';
str += '<td>' + movie.name+ '</td>';
str += '<td>' + movie.detail+ '</td>';
str += '</tr>';
});
// 將數(shù)據(jù)添加到表格中
tbody.innerHTML = str;
// 性能優(yōu)化建議: 使用文檔片段統(tǒng)一添加,以減少DOM操作,提升渲染效率
/*
var frag = document.createDocumentFragment();
movies.forEach(function (movie) {
var tr = document.createElement('tr');
for (var key in movie) {
var td = document.createElement('td');
td.innerHTML = movie[key];
tr.appendChild(td);
}
frag.appendChild(tr);
});
tbody.appendChild(frag);
*/
ul.innerHTML+="<li id='prev'>?</li>";
// 3. 生成頁碼
for (var i = 1; i <= pages; i++) {
// 設(shè)置當前頁碼是否高亮?
var active = (i === p) ? 'active' : '';
ul.innerHTML += '<li class="'+ active +'">' + i + '</li>';
// 供參考的,規(guī)范的DOM語法
/*
var li = document.createElement('li');
li.appendChild(document.createTextNode(i.toString()));
if (p === i) li.classList.add('active');
ul.appendChild(li);
*/
}
ul.innerHTML+="<li id='next'>?</li>";
}
}
// 給頁碼添加點擊事件
ul.addEventListener('click', set_page, false);
function set_page(ev) {
if(ev.target.id==='prev'&&p>1){
p=p-1;
}
if(ev.target.id==='next'&&p<pages){
p=p+1;
}
if(ev.target.id===""){
p=ev.target.innerText;
}
location.search = '?p=' +p;
}
</script>點擊 "運行實例" 按鈕查看在線實例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號