这里展现出成品的样式，接下来让我们欣赏来自代码的快乐
CSS：
<style> th,td{ min-width: 120px; text-align: center; } .tool { display: flex; align-items: center; margin-top: 20px; } .paging { display: flex; align-items: center; } .paging div { width: 30px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #999999; border-radius: 6px; background-color: #EEEEEE; font-size: 20px; margin: 0 5px; } .paging span { display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #999999; border-radius: 6px; background-color: #EEEEEE; font-size: 20px; margin: 0 5px; } .inp input { width: 60px; } </style>
HTML：
<table border="1" cellspacing="0" cellpadding="10"> <thead> <tr> <th><input type="checkbox" class="quanxuan" onclick="xuanqu()">全选</th> <th>序号</th> <th>名字</th> <th>金额</th> <th>名称</th> </tr> </thead> <tbody id="tbody"> <tr> <th>1</th> <th>张三</th> <th>18</th> <th>河南</th> </tr> <tr> <th>1</th> <th>张三</th> <th>18</th> <th>河南</th> </tr> <tr> <th>1</th> <th>张三</th> <th>18</th> <th>河南</th> </tr> <tr> <th>1</th> <th>张三</th> <th>18</th> <th>河南</th> </tr> </tbody> </table> <tbody> <div class="tool"> <select name="" id="tiao"> <option value="1">每页5条</option> <option value="2">每页10条</option> <option value="3">每页15条</option> <option value="4">每页20条</option> <option value="5">每页25条</option> <option value="6">每页30条</option> </select> <div class="paging"> <div><</div> <span>1</span> <span>2</span> <span>3</span> <div>></div> </div> <div class="inp"> 前往 <input type="number" class="tiaozhuan"> 页 </div> </div> </tbody>
JS:
<script> let data = [ { id:1, name:"雷神", age:888, address:"穿越火线" },{ id:2, name:"黑骑士", age:888, address:"穿越火线" },{ id:3, name:"黑龙", age:888, address:"穿越火线" },{ id:4, name:"死神", age:888, address:"穿越火线" },{ id:5, name:"千变", age:888, address:"穿越火线" },{ id:6, name:"QBZ-蔷薇", age:488, address:"穿越火线" },{ id:7, name:"毁灭", age:888, address:"穿越火线" },{ id:8, name:"幻神", age:1000, address:"穿越火线" },{ id:9, name:"星神", age:1000, address:"穿越火线" },{ id:10, name:"AWM-裁决", age:688, address:"穿越火线" },{ id:11, name:"M4A1-传说-天使", age:688, address:"穿越火线" },{ id:12, name:"USB-雷暴", age:1400, address:"穿越火线" },{ id:13, name:"修罗", age:488, address:"穿越火线" },{ id:14, name:"COP-堕天神", age:1400, address:"穿越火线" },{ id:15, name:"柯尔特-竞技荣光", age:20, address:"穿越火线" },{ id:16, name:"屠龙", age:488, address:"穿越火线" },{ id:17, name:"龙啸", age:488, address:"穿越火线" },{ id:18, name:"擎天", age:488, address:"穿越火线" },{ id:19, name:"麒麟刺", age:488, address:"穿越火线" },{ id:20, name:"王者之刺", age:100, address:"穿越火线" },{ id:21, name:"王者之锋", age:100, address:"穿越火线" },{ id:22, name:"魅影", age:200, address:"穿越火线" },{ id:23, name:"王者魅影", age:200, address:"穿越火线" },{ id:24, name:"春", age:1400, address:"穿越火线" },{ id:25, name:"王者春", age:200, address:"穿越火线" },{ id:26, name:"潘多拉-X", age:20, address:"穿越火线" },{ id:27, name:"审判者", age:488, address:"穿越火线" },{ id:28, name:"暗夜-X", age:20, address:"穿越火线" },{ id:29, name:"雷神-荣耀", age:1000, address:"穿越火线" },{ id:30, name:"毁灭-荣耀", age:1000, address:"穿越火线" } ] let page = 5; let num = 0; renders(); function renders(){ let str = ""; for (let i = num*page; i < (num+1)*page; i++) { if(data[i]){ str += ` <tr> <th><input type="checkbox" class="danxuan" onclick="danxuan_d()"></th> <th>${data[i].id}</th> <th>${data[i].name}</th> <th>${data[i].age}</th> <th>${data[i].address}</th> </tr> `; } } document.getElementById("tbody").innerHTML = str; renderPage(); } function renderPage(){ let str = `<div onclick="isLeft()"><</div>`; let count = Math.ceil(data.length /page); for (let i = 0; i < count; i++) { str += ` <span onclick="isNum(${i})" style = "background-color:${num == i ? '#666eff' : '#EEEEEE'}">${i+1}</span> `; } str += `<div onclick="isRight()">></div>`; document.getElementsByClassName("paging")[0].innerHTML = str; } function isRight(){ let count = Math.ceil(data.length /page); if (num < count-1) { num++; renders(); }else{ alert("最后一页了别点了。") } } function isLeft(){ if (num > 0) { num--; renders(); }else{ alert("第一页了就别点了呗。") } } function isNum(i){ num = i; renders(); } // 全选与单选 function xuanqu(){ let quanxuan = document.getElementsByClassName("quanxuan")[0]; let danxuan = document.getElementsByClassName("danxuan"); for (let i = 0; i < danxuan.length; i++) { danxuan[i].checked = quanxuan.checked; } } // 单选 function danxuan_d(){ let quanxuan = document.getElementsByClassName("quanxuan")[0]; let danxuan = document.getElementsByClassName("danxuan"); for (let i = 0; i < danxuan.length; i++) { if (danxuan[i].checked == false) { quanxuan.checked = false; return; } } quanxuan.checked = true; } // 每页几条 let tiao = document.getElementById("tiao"); tiao.addEventListener("change",function(){ num = 0; let g = this.value; if (g == 1) { page = 5; } else if(g == 2){ page = 10 } else if(g == 3){ page = 15 }else if(g == 4){ page = 20 }else if(g == 5){ page = 25 }else if(g == 6){ page = 30 } renders(); }) // 跳转页面 let tiaozhuan = document.getElementsByClassName("tiaozhuan")[0]; tiaozhuan.addEventListener("change",function(){ let sssss = this.value; if (sssss < (data.length / page)+1 && sssss != '' && sssss > 0) { num = sssss-1; } else{ alert("请输入正确页数") } renders(); }) </script>
请问你快乐吗？
