效果

话不多说，直接看效果，本次代码较为复杂，希望大家可以耐心阅读，不懂的可以评论或者邮箱联系我（bigdatayu@qq.com）。
完整代码也可以在我的GitHub中找到，GitHub链接在此

页面

增

点击新增按钮，弹出如下 新增学生信息 输入框架，输入内容，点击提交，回到初始页面，并将内容写入表格中；点击取消，直接回到初始页面，效果如下所示

当增加数据条数超过初始页面选择的显示条数（10条），再次增加，在第一页时，不再继续显示，点击下一页，再增加，可继续显示添加内容，效果如下所示

删

选择每一行最前面的方框，再点击删除，弹出如下 待删除的学生信息 框架，点击确定按钮，删除选定的行，并且后面的行会自动补上去，序号列也会自动变换；点击取消，直接回到初始页面，效果如下所示

点击标题行上的方框，就可就该页的十条数据全部选定，点击删除，即可删除该页的所有数据，效果如下所示

改

点击每一行最后的修改按钮，弹出如下 修改学生信息 框架，点击保存按钮，将该行的原本数据替换为修改后的数据；点击取消，直接回到初始页面，效果如下所示

查

点击每一行最后的查看按钮，弹出如下 查看学生信息 框架，此时的数据不可改，仅仅允许查看，点击取消，回到初始页面，效果如下所示

翻页

在首页时，点击上一页按钮，弹出提示 当前为第一页，无法先前翻页
在尾页时，点击下一页按钮，弹出提示 当前为最后一页，无法向后翻页
可以进行正常的翻页，效果如下所示

代码

此处只展示部分 JavaScript 代码，完整代码可在我的GitHub中自行提取，GitHub链接在此

数据增加——add.js：

// 新增按钮
function add() {// 打开新增框架document.getElementById('addBlock').style.display = 'block';document.getElementById('totalBackground').style.display = 'block';
}// 提交按钮
function sumbit() {// 关闭新增框架document.getElementById('addBlock').style.display = 'none';document.getElementById('totalBackground').style.display = 'none';// 写入表单// 获取表var iTable = document.getElementById('myTable');// 获取输入值var stuId = document.getElementById('stuId1').value;var name = document.getElementById('name1').value;var colg = document.getElementById('colg1').value;var profession = document.getElementById('profession1').value;var grade = document.getElementById('grade1').value;var stuClass = document.getElementById('stuClass1').value;var age = document.getElementById('age1').value;var nums = iTable.rows.length;// 创建一行trvar iTr = document.createElement('tr');// 隔行换色if (nums % 2 != 0){iTr.className = 'mainTbodyTr1';}else {iTr.className = 'mainTbodyTr2';}// 将tr添加到table中iTable.appendChild(iTr);// 创建选择按钮var sel = document.createElement('input');sel.setAttribute('type','checkbox');sel.setAttribute('name','item');// 创建单元格td，并添加属性、内容var iTd1 = document.createElement('td');iTd1.className = "col1";iTd1.appendChild(sel);var iTd2 = document.createElement('td');iTd2.className = "col2";iTd2.appendChild(document.createTextNode(nums));var iTd3 = document.createElement('td');iTd3.className = "col3";iTd3.appendChild(document.createTextNode(stuId));var iTd4 = document.createElement('td');iTd4.className = "col4";iTd4.appendChild(document.createTextNode(name));var iTd5 = document.createElement('td');iTd5.className = "col5";iTd5.appendChild(document.createTextNode(colg));var iTd6 = document.createElement('td');iTd6.className = "col6";iTd6.appendChild(document.createTextNode(profession));var iTd7 = document.createElement('td');iTd7.className = "col7";iTd7.appendChild(document.createTextNode(grade));var iTd8 = document.createElement('td');iTd8.className = "col8";iTd8.appendChild(document.createTextNode(stuClass));var iTd9 = document.createElement('td');iTd9.className = "col9";iTd9.appendChild(document.createTextNode(age));var iTd10 = document.createElement('td');iTd10.className = "col10";var examine = document.createElement('input');examine.id = 'examine';examine.setAttribute('type','button');examine.setAttribute('value','查看');examine.setAttribute('onclick','examine(this)');var update = document.createElement('input');update.id = 'update';update.setAttribute('type','button');update.setAttribute('value','修改');update.setAttribute('onclick','update(this)');iTd10.appendChild(examine);iTd10.appendChild(update);// 将单元格添加到行iTr.appendChild(iTd1);iTr.appendChild(iTd2);iTr.appendChild(iTd3);iTr.appendChild(iTd4);iTr.appendChild(iTd5);iTr.appendChild(iTd6);iTr.appendChild(iTd7);iTr.appendChild(iTd8);iTr.appendChild(iTd9);iTr.appendChild(iTd10);// 将新增框架中的输入框值初始化document.getElementById('stuId1').value = null;document.getElementById('name1').value = null;document.getElementById('colg1').value = null;document.getElementById('profession1').value = null;document.getElementById('grade1').value = null;document.getElementById('stuClass1').value = null;document.getElementById('age1').value = null;document.getElementById('nums').innerText = nums;var pageNum = document.getElementById('pageNum').innerText;pageNum = parseInt(pageNum);for (var i=10*pageNum+1; i<=nums; i++) {iTable.rows[i].style.display = 'none';}
}// 新增中的取消按钮
function addCancel() {// 关闭新增框架document.getElementById('addBlock').style.display = 'none';document.getElementById('totalBackground').style.display = 'none';
}

数据删除——del.js：

// 全选
function checkAll(obj){var status = obj.checked;var items = document.getElementsByName('item');var pageNum = document.getElementById('pageNum').innerText;pageNum = parseInt(pageNum);for (var i=(pageNum-1)*10; i<pageNum*10; i++) {items[i].checked=status;}
}// 删除按钮
function del() {// 打开删除框架document.getElementById('delBlock').style.display = 'block';document.getElementById('totalBackground').style.display = 'block';var items = document.getElementsByName('item');var message = [];for(var j=0;j<items.length;j++){if(items[j].checked) //如果item被选中{var m = items[j].parentNode.parentNode.cells[3].innerText;message.push(m);}}var delNode = document.getElementById('delMessage');delNode.innerText = message.join('\t');
}// 确认按钮
function confirm() {// 关闭删除框架document.getElementById('delBlock').style.display = 'none';document.getElementById('totalBackground').style.display = 'none';var items = document.getElementsByName('item');var items_num = 0;for(var j=0;j<items.length;j++){if(items[j].checked)//如果item被选中{items_num += 1;items[j].parentNode.parentNode.remove();j--;}}var iTable = document.getElementById('myTable');var iTrs = iTable.getElementsByTagName('tr');for (var i=1; i<iTrs.length; i++) {if (i % 2 != 0)iTrs[i].className = 'mainTbodyTr1';elseiTrs[i].className = 'mainTbodyTr2';var sort = iTrs[i].getElementsByTagName('td')[1];sort.innerText = i;}var nums = iTrs.length - 1;document.getElementById('nums').innerText = nums;nums = parseInt(nums);var pageSum = Math.ceil(nums / 10);var pageNum = document.getElementById('pageNum').innerText;pageNum = parseInt(pageNum);if (pageNum <= pageSum) {for (var i=(pageNum-1)*10+1; i<pageNum*10+1; i++) {iTable.rows[i].style.display = 'table-row';}for (var i=1; i<(pageNum-1)*10+1; i++) {iTable.rows[i].style.display = 'none';}for (var i=pageNum*10+1; i<nums+1; i++) {iTable.rows[i].style.display = 'none';}}if (pageNum > pageSum) {for (var i=(pageNum-2)*10+1; i<nums+1; i++) {iTable.rows[i].style.display = 'table-row';}for (var i=1; i<(pageNum-2)*10+1; i++) {iTable.rows[i].style.display = 'none';}document.getElementById('pageNum').innerText = pageNum - 1;}
}// 删除中的取消按钮
function delCancel() {// 关闭删除框架document.getElementById('delBlock').style.display = 'none';document.getElementById('totalBackground').style.display = 'none';
}

难点

难点1

如何将输入框中的数据，写入表格。
问题1：获取输入数据

var stuId = document.getElementById('stuId1').value;
var name = document.getElementById('name1').value;

通过document.getElementById('object').value获取输入框中的数据
问题2：将数据写入表格

var iTr = document.createElement('tr');

创建 tr 标签，即创建行

var iTd1 = document.createElement('td');
iTd1.className = "col1";
iTd1.appendChild(sel);

创建 td 标签，即创建单元格，并将数据加入单元格

iTable.appendChild(iTr);
iTr.appendChild(iTd1);

将行添加到表，将单元格添加到行

难点2

全选，如何只选当前页的所有数据。
问题1：全选

<input type="checkbox" onclick="checkAll(this)"/>

它有一个checked属性，可以判断它是否被选择。
点击这个<input>，将这一页的这一列，全部保持相同的checked属性，即可做出全选。
问题2：仅选择当前页
首先需要拿到当前页面，然后，由于每一页设定只显示10条内容，设当前页面数为page，则有以下规则

1. 当前页的开始条数为(page-1)*10+1，例如在第1页时，开始条数为(1-1)*10+1 = 1；在第二页时，开始条数为(2-1)*10+1 = 11
2. 当前页的结束条数为page*10，例如在第1页时，结束条数为1*10 = 10；在第二页时，结束条数为2*10 = 20

如此，就可以做到仅仅全选当前页所有数据。

难点3

删除后，需要补齐。
问题：删除后，该页是否还有数据，是否需要跳页
可以获取删除后的总行数，设总行数为rows，有以下规则

1. rows除10，向上取整，则可以得到，一共有多少页，设总页数为sumpages
2. 当前页数page大于总页数sumpages时，则表示，现在的数据已经少于当前页数page应有的数据量，则需要进行跳页，即跳转到上一页
3. 当前页数page小于总页数sumpages时，则表示，现在的数据支持当前页数page应有的数据量，则只需要继续显示该页面的数据即可

难点4

翻页，判断首页或者尾页。

首页，简单，只需拿取当前页的数据page，如果page == 1，则表示在首页；
尾页，难点3当中已经讲到解决方法，即如果page == sumpages，则表示在尾页。

结语

代码中都写有注释，希望你能耐心阅读，如还有不理解的地方，可以通过评论或邮箱联系我（1079349989@qq.com）。

最终，望您学业有成、事业有成，谢谢！