var students = [{
id: 11923020401,
name: '廖飞',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020402,
name: '黄峰鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020403,
name: '
黄飞鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020402,
name: '黄峰鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020403,
name: '
黄飞鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020402,
name: '黄峰鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020403,
name: '
黄飞鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020402,
name: '黄峰鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020403,
name: '
黄飞鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020402,
name: '黄峰鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020403,
name: '
黄飞鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020402,
name: '黄峰鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}, {
id: 11923020403,
name: '
黄飞鸿',
college: '两江人工智能学院',
major: '软件工程',
grade: 2019,
class: 4,
year: 18,
}
];
//创建节点
var tbody=document.getElementsByClassName('tbody')[0];
//分页初始数据
var pageNum=1;//当前页
var pageSize=10;//每页数据量
var pageTotal;//总页数
var currentData;//分页显示数据
function renderTable(){
tbody.innerHTML='';
var start =(pageNum-1)*pageSize;
var end=start+pageSize;
currentData=students.slice(start,end);
pageTotal=Math.ceil(students.length/pageSize);
// document.getElementById('paginationInfo').innerHTML
// '第'+pageNum+'页，共'+
// Math.ceil(students.length/pageSize)+
// '页，（每页显示10条）';
currentData.map(
function(item,index){
var tr =document.createElement('tr');
tbody.appendChild(tr)
var td=document.createElement('td');
tr.appendChild(td)
td.innerHTML='<input type="radio" name="xuan" class="rowRadio"/>';
tr.appendChild(td);
var td=document.createElement('td');
td.innerHTML=index+1;
tr.appendChild(td);
for(var j in students[index]){
var td =document.createElement('td');
td.innerHTML=students[index][j]
tr.appendChild(td);
}
var td=document.createElement('td');
td.innerHTML='<a hret="#">查看</a> <a hret="#">修改</a>';
tr.appendChild(td);
}
);
document.getElementById('paginationInfo').textContent='第'+pageNum+'页，共'+pageTotal+'页，共'+students.length+'条数据（每页显示10条）'
}
renderTable();
//上一页
document.getElementById('preP').onclick=function(){
if(pageNum>1){
pageNum--;
renderTable();
CKXGTK ();
}else if(pageNum==1){
alert('已经是第一页了！')
}
}
//下一页
document.getElementById('nextP').onclick=function(){
if(pageNum<pageTotal){
pageNum++;
renderTable();
CKXGTK ();
}else if(pageNum==pageTotal){
alert('已经是最后一页了！')
}
}
//点击查看、修改、弹出弹框
var findTd;
var saveId;
function CKXGTK (){
var a_all=[...document.getElementsByTagName('a')];
a_all.map(
function(item,index){
if(index%2==0){
//查看弹框
item.onclick=function(){
if((index/2)<10&&pageNum==1){
findTd=index/2;
}else{
findTd=String(pageNum-1)+index/2;
}
document.getElementById('id3').value=students[findTd].id;
document.getElementById('name3').value=students[findTd].name;
document.getElementById('college3').value=students[findTd].college;
document.getElementById('major3').value=students[findTd].major;
document.getElementById('grade3').value=students[findTd].grade;
document.getElementById('class3').value=students[findTd].class;
document.getElementById('year3').value=students[findTd].year;
document.getElementById("findTK").style.display="block";
document.getElementById("zhezhao").style.display="block";
}
}else{
//修改弹框
item.onclick=function(){
if(parseInt(index/2)<10&&pageNum==1){
saveId=parseInt(index/2);
}else{
saveId=String(pageNum-1)+parseInt(index/2);
}
document.getElementById('id2').value=students[saveId].id;
document.getElementById('name2').value=students[saveId].name;
document.getElementById('college2').value=students[saveId].college;
document.getElementById('major2').value=students[saveId].major;
document.getElementById('grade2').value=students[saveId].grade;
document.getElementById('class2').value=students[saveId].class;
document.getElementById('year2').value=students[saveId].year;
document.getElementById("findTK").style.display="block";
document.getElementById("zhezhao").style.display="block";
}
}
}
)
}
CKXGTK ();
//修改--保存按钮
document.getElementById('save').onclick=function(){
students[saveId].id=document.getElementById('id2').value;
students[saveId].name=document.getElementById('name2').value;
students[saveId].college=document.getElementById('college2').value;
students[saveId].major=document.getElementById('major2').value;
students[saveId].grade=document.getElementById('grade2').value;
students[saveId].class=document.getElementById('class2').value;
students[saveId].year=document.getElementById('year2').value;
document.getElementById("findTK").style.display="none";
document.getElementById("zhezhao").style.display="none";
renderTable();
CKXGTK();
}
// var a_all=[...a_all]
//查看弹框的取消
document.getElementById('cance3_1').onclick=function(){
document.getElementById("findTK").style.display="none";
document.getElementById("zhazhao").style.display="none";
}
//修改弹框的取消
document.getElementById('cance2_1').onclick=function(){
document.getElementById("findTK").style.display="none";
document.getElementById("zhezhao").style.display="none";
}
//修改功能
document.getElementById('findBth').onclick=function(){
document.getElementById('findTK').style.display='block'
}
//查看功能
document.getElementById('alertBth').onclick=function(){
document.getElementById('alterTK').style.display='block'
}
//添加按钮
document.getElementById('addBtn').onclick=function(){
document.getElementById('addStudent').style.display='block';
}
document.getElementById('submit').onclick=function(){
var addId= document.getElementById('id1').value;
var addName= document.getElementById('name1').value;
var addCol= document.getElementById('college1').value;
var addMajor= document.getElementById('major1').value;
var addGrade= document.getElementById('grade1').value;
var addClass= document.getElementById('class1').value;
var addYear= document.getElementById('year1').value;
if(addId&&addName&&addCol&&addMajor&&addGrade&&addClass&&addYear){
var addobj={
id:addId,
name:addName,
college:addCol,
major:addMajor,
grade:addGrade,
class:addClass,
year:addYear,
}
students.push(addobj);
renderTable();
document.getElementById('addTK').style.dispaly='none'
document.getElementById('zhezhao').style.dispaly='none'
}
}
document.getElementById('cance1_1').onclick=function(){
document.getElementById('addStudent').style.display='none';
}不改变js代码帮我写出css和html的代码
扫一扫
7376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
