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 onload="init()">
<!-- 打开修改或添加的操作窗口时，用来覆盖网页的div -->
<div id="back_div">
<!-- 作为进行添加操作的窗口，不打开时是隐藏的 -->
<div id="addOperation">
<!-- 让表单中的组件能够向右对齐 -->
<div id="main_div">
<h2>添加学生...</h2>
<!-- 收集并验证需要添加的数据 -->
<form id="add_from" onsubmit="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" onsubmit="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' onclick='delStudent(", i, ")'>删除</a>】",
"【<a href='javascript://' onclick='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;
}运行结果：
9ee6c1dade22d2bf32cc3ec4b5ede8ec.png
2070da706cac129f40e30d149dd400cb.png
b6b98d89ed95c17488e6d74de5e0b720.png
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。