html+css+JavaScript例题
这个例题主要是做一个表格,一个存储学生资料的表格,能够完成以下功能:
添加学生
删除学生
修改学生
分页查询学生
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="css/style_A.css" />
<!-- 引入脚本文件 -->
<script type="text/javascript" src="js/operation.js"></script>
<!-- 添加一个用于初始化的事件 -->
<body οnlοad="init()">
<!-- 打开修改或添加的操作窗口时,用来覆盖网页的div -->
<div id="back_div">
<!-- 作为进行添加操作的窗口,不打开时是隐藏的 -->
<div id="addOperation">
<!-- 让表单中的组件能够向右对齐 -->
<div id="main_div">
<h2>添加学生...</h2>
<!-- 收集并验证需要添加的数据 -->
<form id="add_from" οnsubmit="return addStudent(this)"><!-- 任何情况下都return false表单不提交 -->
<ul>
<li>
<label>姓名:</label>
<input type="text" required="required" placeholder="姓名只能是中文" name="sname"
pattern="[\u4E00-\u9FA5]{2,5}$" /><label class="label">*</label>
</li>
<li>
<label>年龄:</label><input type="text" required="required" placeholder="周岁"
name="age" /><label class="label">*</label>
</li>
<li>
<label>性别:</label><label style="margin-left: 30px;">男</label><input type="radio"
checked name="sex" /><label style="margin-left: 70px;">女</label><input type="radio" name="sex" />
<label class="label">*</label>
</li>
<li>
<label>住址:</label><input type="text" required="required" placeholder="联系地址"
name="address" /><label class="label">*</label>
</li>
<li>
<label>手机号码:</label><input type="text" required="required" placeholder="手机号码"
name="phoneNumber" pattern="^1[34578]\d{9}$"/><label class="label">*</label>
</li>
<button id="add_button" type="submit">添加</button>
<button type="button" id="close_button">退出</button>
</ul>
</form>
</div>
</div>
<!-- 作为进行修改操作的窗口,不打开时是隐藏的 -->
<div id="editOperation">
<!-- 让表单中的组件能够向右对齐 -->
<div id="editMain_div">
<h2>修改学生资料...</h2>
<!-- 收集并验证需要修改的数据 -->
<form id="edit_from" οnsubmit="return editStudent(this)">
<ul>
<li>
<label>姓名:</label>
<!-- 隐藏域是用来记录需要修改的学生对象所在的数组下标的 -->
<input type="hidden" name="arrayIndex" />
<input type="text" required="required" placeholder="姓名只能是中文" name="sname"
pattern="[\u4E00-\u9FA5]{2,5}$" /><label class="label">*</label>
</li>
<li>
<label>年龄:</label><input type="text" required="required" placeholder="周岁"
name="age" /><label class="label">*</label>
</li>
<li>
<label>性别:</label><label style="margin-left: 30px;">男</label><input type="radio"
checked name="sex" /><label style="margin-left: 70px;">女</label><input type="radio" name="sex" />
<label class="label">*</label>
</li>
<li>
<label>住址:</label><input type="text" required="required" placeholder="联系地址"
name="address" /><label class="label">*</label>
</li>
<li>
<label>手机号码:</label><input type="text" required="required" placeholder="手机号码"
name="phoneNumber" pattern="^1[34578]\d{9}$" /><label class="label">*</label>
</li>
<button id="edit_button" type="submit">修改</button>
<button type="button" id="editClose_button">退出</button>
</ul>
</form>
</div>
</div>
</div>
<!-- 让表格居中 -->
<div align="center">
<!-- 以表格的方式显示数据 -->
<table id="tableData" cellspacing="0" >
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>住址</th>
<th>手机号码</th>
<th>操作</th>
</tr>
</thead>
<!-- 用于方便插入数据 -->
<tbody id="tableBody">
</tbody>
<tfoot>
<tr>
<td colspan="6" align="right">
<!-- 注册相应的事件 -->
[
<a href="javascript://" id="addHref">添加学生</a>] 共计
<label id="rowCountLabel">0</label>行, 分
<label id="pageCountLabel">0</label>页, 当前是第
<label id="thisPageLable">1</label>页 [
<a href="javascript://" id="shouye">首页</a>] [
<a href="javascript://" id="shangyiye">上一页</a>] [
<a href="javascript://" id="xiayiye">下一页</a>] [
<a href="javascript://" id="weiye">尾页</a>]
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
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 < students.length && rowNum++ != 10; i++) { //添加到第十行就要跳出循环 var stuObj = students[i]; //拿取学生对象 //利用数组合成html标签,并将学生对象里的数据添加进去 var trStr = ["<tr>", "<td>", stuObj.name, "</td>", "<td>", stuObj.age, "</td>", "<td>", stuObj.sex, "</td>", "<td>", stuObj.address, "</td>", "<td>", stuObj.phoneNumber, "</td>", "<td>", //添加事件,并把每行数据的数组下标记录在参数里 "【<a href='javascript://' id='delete' οnclick='delStudent(", i, ")'>删除</a>】", "【<a href='javascript://' οnclick='showStudentEditDiv(", i, ")'>修改</a>】", "</td>", "</tr>" ].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; }
运行结果:
转载于:https://blog.51cto.com/zero01/1977526