实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影分类</title>
<style>
/*设置表格样式*/
table
{
/*折叠表格线与单元格之间的间隙*/
border-collapse:collapse;
width: 90%;
}
/*设置表格与单元格边框*/
table,th, td
{
border: 1px solid black;
text-align: center;
}
/*设置标题行背景色*/
table thead tr:first-of-type {
background-color: lightblue;
}
/*设置每一列的宽度*/
table tbody tr td:nth-of-type(1) {
width: 10%;
}
table tbody tr td:nth-of-type(2){
width: 20%;
}
table tbody tr td:nth-of-type(3) {
width: 70%;
}
/*设置分页条样式*/
ul {
text-align: center;
}
ul li {
/*去掉默认样式*/
list-style-type: none;
/*转为水平显示*/
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid black;
/*垂直水平居中*/
text-align: center;
line-height: 20px;
cursor: pointer;
margin-left: 5px;
}
ul li:hover {
background-color: lightblue;
border: 1px solid red;
}
/*作业: 如何设置当前页码的高亮?*/
.active {
background-color: lightblue;
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<caption>最新影视剧介绍</caption>
<thead>
<tr>
<th>序号</th>
<th>片名</th>
<th>简介</th>
</tr>
</thead>
<!-- tr*5>td{x}*3-->
<tbody>
<!--<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>-->
</tbody>
</table>
<!--分页条-->
<ul>
</ul>
<script>
// 1.创建Ajax对象
var ajax = new XMLHttpRequest();
// 2.监听请求
ajax.onreadystatechange = function (ev) {
// 请求成功
if(ajax.readyState === 4){
var date = JSON.parse(ajax.responseText);
var oUl = document.getElementsByTagName('ul')[0];
console.log(date);
for(var i=0;i<date[0];i++){
var oLi = document.createElement('li');
//给oLi添加点击事件
oLi.onclick = function () {
var search = location.search.slice(0,6) + this.innerText;
location.replace(search); //替换当前请求
};
oLi.innerHTML = i + 1;
oUl.appendChild(oLi);
}
var oLis = document.getElementsByTagName('li');
var index = location.search.slice(6);
for(var i = 0;i< oLis.length;i++){
oLis[i].className = '';
if(oLis[i].innerText === index){
oLis[i].className = 'active'
}
}
date[1].forEach(function (value) {
// console.log(value);
var oTr = document.createElement('tr');
for (key in value){
var oTd = document.createElement('td');
oTd.innerHTML = value[key];
oTr.appendChild(oTd);
}
var oTbody = document.getElementsByTagName('tbody')[0];
oTbody.appendChild(oTr);
})
}
};
// 3.发送请求
ajax.open('GET', 'get_movies.php?page=<?=$_GET["page"] ?:1?>', true);
ajax.send(null);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例