这个例题主要是做一个表格，一个存储学生资料的表格，能够完成以下功能：添加学生
删除学生
修改学生
分页查询学生
html代码：html>
添加学生...
姓名：
pattern="[\u4E00-\u9FA5]{2,5}$" />*
年龄：
name="age" />*
性别：男
checked name="sex" />女
*
住址：
name="address" />*
手机号码：
name="phoneNumber" pattern="^1[34578]\d{9}$"/>*
添加
退出
修改学生资料...
姓名：
pattern="[\u4E00-\u9FA5]{2,5}$" />*
年龄：
name="age" />*
性别：男
checked name="sex" />女
*
住址：
name="address" />*
手机号码：
name="phoneNumber" pattern="^1[34578]\d{9}$" />*
修改
退出
姓名年龄性别住址手机号码操作
[
添加学生] 共计
0行， 分
0页， 当前是第
1页 [
首页] [
上一页] [
下一页] [
尾页]
CSS代码：body{
margin: 0px;
}
#back_div{
position: absolute;
z-index: 997;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
display: none;
}
#addOperation,#editOperation{
position: absolute;
z-index: 998;
width: 506px;
height: 333px;
top: 25%;
left: 35%;
background-color: cornflowerblue;
border-radius: 10px;
}
#tableData{
width: 100%;
text-align: center;
}
#tableData thead tr th{
margin: 0px;
font-size:20px ;
box-shadow: 0px 10px 10px darkgray;
background-color: rgba(230,230,230,0.5);
}
#tableBody td{
margin-top: 0px;
margin-bottom: 0px;
box-shadow: 0px 0px 3px darkgray;
background-color: rgba(255,255,255,0.0);
}
#tableBody tr:hover{
height: 65px;
background-color: rgba(230,230,230,0.3);
}
#tableData tr td,th{
padding: 20px;
}
a{
text-decoration: none;
color: #6495ED;
}
#delete{
color: red;
}
a:hover{
text-decoration: underline;
color: chocolate;
}
.label{
color: red;
margin-left:5px;
}
ul{
list-style: none;
}
#main_div button,#editMain_div button{
position: absolute;
text-align: left;
}
#main_div button:hover{
background-color: dimgray;
color: #D2691E;
border: 1px solid dimgray;
}
#editMain_div button:hover{
background-color: #6495ED;
color: white;
border: 1px solid dimgray;
}
ul li{
margin: 20px;
}
#main_div,#editMain_div{
width: 380px;
text-align: right;
}
#main_div h2,#editMain_div h2{
font-weight: 500;
text-align: left;
margin-left: 15px;
}
#add_button,#edit_button{
left: 175px;
}
#close_button,#editClose_button{
left: 305px;
}
JavaScript代码：//用于存储学生对象的数组
var students = new Array();
//总共能分多少页数
var pageConut = 0;
//当前页数
var thisPage = 0;
//通过元素ID查找到元素对象，然后返回出去
function $(element_ID) {
return window.document.getElementById(element_ID);
}
//关闭用于覆盖网页的div
function close_div() {
$("back_div").style.display = "none";
}
//打开添加学生资料的div
function open_add() {
$("back_div").style.display = "block";
$("addOperation").style.display = "block";
$("editOperation").style.display = "none";
}
//打开修改学生资料的div
function open_edit() {
$("addOperation").style.display = "none";
$("back_div").style.display = "block";
$("editOperation").style.display = "block";
}
//随便注入一些数据来测试用的
function initData() {
for(var i = 0; i <= 10; i++) {
var stu = new Student("test" + i, 12, "男", "湖南" + i, "15820365112");
students.push(stu);
}
}
//初始化方法，主要用来给各个元素添加事件
function init() {
//初始化时注入一些数据来测试效果
initData();
//在初始化时显示第一页
showStudentAll(1);
//点击这个超链接后就能打开添加学生资料的窗口
$("addHref").onclick = function() {
open_add();
}
//点击这个按钮后就能退出添加学生资料的窗口
$("close_button").onclick = function() {
close_div();
}
//点击这个按钮后就能退出修改学生资料的窗口
$("editClose_button").onclick = function() {
close_div();
}
//点击这个超链接后就能跳转到首页
$("shouye").onclick = function() {
//如果只有一页就不跳到首页，并告诉用户只有一页数据
if(pageConut == 1) {
alert("当前只有一页！");
return;
}
//如果不止一页就可以跳到首页
showStudentAll(1);
}
//点击这个超链接后就能跳转到上一页
$("shangyiye").onclick = function() {
//如果当前是第一页就停留，否则跳转到到上一页
showStudentAll(thisPage == 1 ? 1 : thisPage - 1);
}
//点击这个超链接后就能跳转到下一页
$("xiayiye").onclick = function() {
//如果当前是最后一页就停留，否则跳转到到下一页
showStudentAll(thisPage == pageConut ? pageConut : thisPage + 1);
}
//点击这个超链接后就能跳转到尾页
$("weiye").onclick = function() {
//如果只有一页或者当前就在尾页的话就不跳到尾页，并提示用户
if(pageConut == 1) {
alert("当前只有一页！");
return;
}else if(pageConut==thisPage){
alert("已经是尾页了！");
return;
}
//如果不止一页或不在尾页就可以跳到尾页
showStudentAll(pageConut);
}
}
//以数组下标来删除学生数据
function delStudent(index) {
//询问用户是否确定删除数据，确定才进行删除
if(window.confirm("确定删除此数据吗？")) {
students.splice(index, 1);
}
//删除后刷新当前页面
showStudentAll(thisPage);
}
//通过数组下标来获得需要修改的学生对象，并将此对象的数据显示在div窗口的表单上
function showStudentEditDiv(index) {
open_edit();
//通过数组下标，拿出需要修改的学生数据对象
var stuObj = students[index];
//把从数组里拿出来的对象数据，显示在表单上
$("edit_from").arrayIndex.value = index;//隐藏域是用来记录需要修改的学生对象所在的数组下标的
$("edit_from").sname.value = stuObj.name;
$("edit_from").age.value = stuObj.age;
$("edit_from").address.value = stuObj.address;
$("edit_from").phoneNumber.value = stuObj.phoneNumber;
//先删除性别单选框里的checked属性，让两个单选框都不被选中
$("edit_from").sex[0].removeAttribute("checked");
$("edit_from").sex[1].removeAttribute("checked");
//如果性别为“男”，就给“男”单选框添加checked属性，让这个单选框被选中，否则反之
if(stuObj.sex == "男") {
$("edit_from").sex[0].setAttribute("checked", "true");
} else {
$("edit_from").sex[1].setAttribute("checked", "true");
}
}
//学生数据的封装类
function Student(name, age, sex, address, phoneNumber) {
this.name = name;
this.age = age;
this.sex = sex;
this.address = address;
this.phoneNumber = phoneNumber;
}
//将当前页码的学生数据呈现出来
function showStudentAll(page) {
//存储当前页码
thisPage = page;
//以10行为一页，计算总共分几页 //因为以10行为一页，所以数组长度除以10
pageConut = Math.floor((students.length / 10) + (students.length % 10 == 0 ? 0 : 1));
//这里是要得出余数，因为如果尾页的行数少于10行的话，就得分一页出来，
//如果刚好是10行的话，就不需要分了已经能够整除了
var htmlStr = ""; //用字符串存储组合好的html标签
var rowNum = 0; //此变量作为循环的跳出条件之一
//循环添加学生数据
/*使用当前页数计算出前一页数据所占的行数，
并以此作为变量的初始值，让变量在这个节
点上进行增长，所以进入某页或者在某页添
加一行数据都是在这个节点上进行重新添加*/
for(var i = ((page - 1) * 10); i
//添加到第十行就要跳出循环
var stuObj = students[i]; //拿取学生对象
//利用数组合成html标签，并将学生对象里的数据添加进去
var trStr = ["
","
",stuObj.name,
"
","
",stuObj.age,
"
","
",stuObj.sex,
"
","
",stuObj.address,
"
","
",stuObj.phoneNumber,
"
","
",//添加事件，并把每行数据的数组下标记录在参数里
"【删除】",
"【修改】",
"
","
"].join("");//将字符串数组合成一个字符串
//alert(htmlStr);
htmlStr += trStr; //将合成后的字符串存储到该变量中
}
//把组合成的标签插入到tableBody里，也就是将数据显示到表格上
$("tableBody").innerHTML = htmlStr;
//显示总行数
$("rowCountLabel").innerText = students.length;
//显示总共分了几页
$("pageCountLabel").innerText = pageConut;
//显示当前在第几页
$("thisPageLable").innerText = thisPage;
}
//添加学生资料，参数为表单对象
function addStudent(fromObj) {
//收集表单数据
var name = fromObj.sname.value;
var age = fromObj.age.value;
var sex = fromObj.sex[0].checked ? "男" : "女";
var address = fromObj.address.value;
var phoneNumber = fromObj.phoneNumber.value;
//在控制台打印日志信息，看看收集表单数据的过程有没有出问题
console.log(name);
console.log(age);
console.log(sex);
console.log(address);
console.log(phoneNumber);
//把收集到的学生数据封装到对象里
var stu = new Student(name, age, sex, address, phoneNumber);
students.push(stu); //然后把对象添加到数组里
//重置表单数据
fromObj.reset();
//关闭添加窗口
close_div();
//显示当前页面的数据，也可以说是刷新
showStudentAll(thisPage);
//不提交表单
return false;
}
//修改学生资料，参数为表单对象
function editStudent(fromObj) {
//收集表单数据
var name = fromObj.sname.value;
var age = fromObj.age.value;
//有checked属性的就会返回true
var sex = fromObj.sex[0].checked ? "男" : "女";
var address = fromObj.address.value;
var phoneNumber = fromObj.phoneNumber.value;
var arrayIndex = fromObj.arrayIndex.value;
//在控制台打印日志信息，看看收集表单数据的过程有没有出问题
console.log(name);
console.log(age);
console.log(sex);
console.log(address);
console.log(phoneNumber);
console.log(arrayIndex);
//通过隐藏域记录的数组下标拿出学生对象
var stuObj = students[arrayIndex];
//将这个对象的数据重新覆盖一遍
stuObj.name = name;
stuObj.age = age;
stuObj.sex = sex;
stuObj.address = address;
stuObj.phoneNumber = phoneNumber;
//重置表单数据
fromObj.reset();
//关闭修改窗口
close_div();
//刷新当前页面
showStudentAll(thisPage);
//不提交表单
return false;
}
运行结果：
扫一扫
1262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
