<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table { border-collapse: collapse; text-align: center; } td { width: 80px; height: 30px; line-height: 30px; border: 1px solid #000000; } .lis { width: 20px; height: 20px; border: 1px solid #000000; text-align: center; line-height: 20px; float: left; } input{ text-align: center; } </style> </head> <body> <script> var phoneList=[ {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}, {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988}, {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500}, {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588}, {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488}, {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888} ]; phoneList.forEach(function (t, number, ts) { t.num=Math.floor(Math.random()*99+1) }) // 当前数组长度按每页10个，可以分为几页，除十向上取整 var pageNum=Math.ceil(phoneList.length/10); // 定位当前第几页，从0页开始到pagNum-2；panNum 从1开始，定位从0开始 var position=0; // 新建一个空数组，截取后数组将用它盛放； var datas=[]; // 创建一个table变量，是全局，但是开始全空 var tb; // 根据pageNum 的数量创建一个分页ul var page=createPageList(pageNum) // 把分页ul插到body尾部 document.body.appendChild(page); // 更新表格 updateTable() /* * 每次数据变化时，执行这个更新表格，初始创建时先更新一次 * 如果tb存在时，先删除tb * 根据position从phoneList数组中截取对应的位置数据存在data中 * 根据截取中的datas创建表格，并且插入到page前面 * * */ function updateTable() { if(tb){ tb.remove(); } datas=phoneList.slice(position*10,(position+1)*10); tb=createTable(datas); document.body.insertBefore(tb,page) } /* * 创建表格 * 参数 data 对象型数组 ，根据截取的数据创建表格 * */ function createTable(data) { // 创建表格 var table=document.createElement("table") // 创建表头行 var thead=document.createElement("tr") // 循环第一行数据，获取所有属性 for(var str in data[0]){ // 根据属性创建表头列 var th=document.createElement("th") // 表头列内容是属性名 th.textContent=str // 把表头列加到表头行中 thead.appendChild(th); } // 把表头行查到表格 table.appendChild(thead); // 根据数据循环创建行 for(var i=0;i<data.length;i++){ // 创建行 var tr=document.createElement("tr"); // 根据每一行对象各属性循环创建列 for(var pro in data[i]){ // 属性是checked时 if(pro==="checked"){ // 创建 checked列 var tdChecked=document.createElement("td") //创建多选框 var checkBox=document.createElement("input") // 当checked属性值为true时 勾选 flase为不勾选 checkBox.type="checkbox" checkBox.checked=data[i][pro]?"checked":"" // 把多选框插到checked列 tdChecked.appendChild(checkBox) // 把checked列插到行中 tr.appendChild(tdChecked) // 属性是num时 }else if(pro==="num"){ // 创建 num列 var tdText=document.createElement("td") //创建文本框 var text=document.createElement("input") // 设置文本框值为num的属性值 text.type="text" text.value=data[i][pro]; // 把文本框插到num列 tdText.appendChild(text) //把num列插到行中 tr.appendChild(tdText) // 属性是icon时 }else if(pro==="icon"){ // 创建 icon列 var tdImg=document.createElement("td") // 创建图像标签 var img=document.createElement("img") // 设置img 的src为icon属性值 img.src=data[i][pro] // 把图像标签插到icon列 tdImg.appendChild(img) //把icon列插到行中 tr.appendChild(tdImg) }else{ // 其他的创建列 var td=document.createElement("td") // 列添加内容为属性值 td.textContent=data[i][pro]; //把列添加到行中 tr.appendChild(td) } //把行插到表格中 table.appendChild(tr) } } // 返回表格 return table } /* * 创建分页容器 * * */ function createPageList(pageNum) { // 创建ul var ul=document.createElement("ul") // 设置ul样式 ul.style.listStyle="none" // 应为要加<<>>内容 所以总列表是总页数+2 pageNum+=2 // 循环总页数 for(var i=0;i<pageNum;i++){ //创建li var li=document.createElement("li") // 如果是0；创建<< if(i===0){ li.textContent="<<" }else if(i===pageNum-1){ //如果是最后一个创建内容>> li.textContent=">>" }else { //其他所有为当前i值 li.textContent=i } // 设置li的样式 li.className="lis" // 侦听li的点击事件 li.addEventListener("click",clickHandler) // 如果i>0；第二个li开始marginleft=10px if(i>0){ li.style.marginLeft="10px" } // 每个il放在ul中 ul.appendChild(li) } return ul } /* * 点击事件 * 点击对象是<< 让position 定位--，如果小于1 跳出 * 点击对象是>> 让position 定位++，如果大于pageNum-2 跳出 * 当点击数字时，position等于页码-1 * * 当定位发生改变时，更新表格 * */ function clickHandler(e) { e=e||window.event; if(this.textContent==="<<"){ if(position<1) return position-- }else if(this.textContent===">>"){ if(position>=pageNum-1) return position++ }else { position=parseInt(this.textContent)-1 } updateTable() } </script> </body> </html>
995
09-29
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
