系列文章目录
Web前端 学习知识点总结（一）HTML基本标签.
Web前端 学习知识点总结（二）之Form和Css选择器.
Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型.
Web前端 学习知识点总结（四）之display 和 float.
Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白.
Web前端 学习知识点总结（六）定位position.
Web前端 学习知识点总结（七）Css3动画animation.
Web前端 学习知识点总结（八）JavaScript的常用基础.
Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础.
Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器.
Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作.
Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式.
Web前端 学习知识点总结（十三）学生管理系统案例.
前言
前端的基本内容到此就到结束了，主要是四部分的学习html5，css3，JavaScript，和jQuery的学习。通过不断的学习，笔者现在认为，如果需要做一名程序员，就需要不断的练习，并根据需要不断学习。之后得JavaSE中继续学习Java的基础，提高编程能力。
一、系统设计思路
1.1 设计思路
对于该系统 总体分为两部分：
1.删除功能
-
横向删除 $(“:button[name=del]”).click(function())
- 改变编号function changenum()
-
全选功能 function all_choose()
- 批量删除 function delall()
2.添加学生 function sho()
主要是对表单的操作，对表单的验证和假提交
- 表单单击添加后 function addstudent()
- 表单验证 function checkForm()
1.2 简单测试
二、系统代码
2.1 html
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/student_02.css" />
</head>
<body>
<div id="list">
<div id="alldel">
<input type="button" value="批量删除" onclick="delall()"/>
<input type="button" value="添加学生" onclick="sho()"/>
</div>
<table>
<tr>
<th>
<input type="checkbox" id="all_cho" onclick="all_choose()"/>全选
</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机号码</th>
<th>班级</th>
<th>电子邮箱</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox" name="ckb"/>
</td>
<td>1</td>
<td>张三</td>
<td>22</td>
<td>男</td>
<td>13567676767676</td>
<td>J2011</td>
<td>zzz@qq.com</td>
<td><input type="button" value="删除" name="del"/></td>
</tr>
<tr>
<td>
<input type="checkbox" name="ckb"/>
</td>
<td>2</td>
<td>王五</td>
<td>19</td>
<td>男</td>
<td>1873333333333</td>
<td>J2012</td>
<td>ws@qq.com</td>
<td><input type="button" value="删除" name="del"/></td>
</tr>
<tr>
<td>
<input type="checkbox" name="ckb"/>
</td>
<td>3</td>
<td>李四</td>
<td>20</td>
<td>女</td>
<td>187222222222</td>
<td>J2012</td>
<td>ss@qq.com</td>
<td><input type="button" value="删除" name="del"/></td>
</tr>
</table>
</div>
<div id="re">
<form action="#" id="re_Form">
<div id="title">
<h2>添加学生</h2>
<a href="#"><span onclick="hid()">X</span></a>
</div>
<p>
<label>姓名：</label>
<input type="text" id="stuName"/>
<span class="tip">姓名不能为空</span>
</p>
<p>
<label>年龄：</label>
<input type="text" id="stuAge" />
<span class="tip">年龄必须是18-35之间</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" checked value="男"/>男
<input type="radio" name="sex" value="女"/>女
</p>
<p>
<label>手机号码：</label>
<input type="text" id="stuTel"/>
<span class="tip">手机号码格式不正确</span>
</p>
<p>
<label>班级：</label>
<input type="text" id="stuGrade"/>
<span class="tip">班级不能不能为空</span>
</p>
<p>
<label>电子邮箱：</label>
<input type="text" id="stuEmail"/>
<span class="tip">邮箱格式不正确</span>
</p>
<p>
<!--这个return非常重要-->
<!--对于静态页面，不进行数据的提交，必须要在这加return 不然会提交onclick的数据
加return 提交的才是 return false
不加的话会先进行一次本地的提交，后续才会正常提交
-->
<input type="submit" value="添加" onclick="return addstudent()"/>
</p>
</form>
</div>
</body>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/student_02.js" type="text/javascript" charset="utf-8"></script>
</html>
2.2 Javascript
关于正则表达式的规则，可以根据具体的业务进行相应的调整，本文只做参考。
代码如下（示例）：
//操作内的删除
$(":button[name=del]").click(function(){
if(confirm("确定要删除吗？")){
// 删除本身
$(this).parent().parent().remove()
// 改变编号
changenum()
}
})
//改变编号
function changenum(){
$(":checkbox[name=ckb]").each(function(index,ele){
$(ele).parent().next().html(index+1)
})
}
//全选
function all_choose(){
$(":checkbox[name=ckb]").prop("checked",$("#all_cho")[0].checked)
//console.log($("#all_cho")[0].checked)
}
//解除全选
$(":checkbox[name=ckb]").click(function(){
// 总长度
var ckblen=$(":checkbox[name=ckb]").length
// 选中的长度
var ckbcho=$(":checkbox[name=ckb]:checked").length
if(ckbcho==ckblen){
$("#all_cho").prop("checked",true)
}else{
$("#all_cho").prop("checked",false)
}
})
//批量删除
function delall(){
// 删除选中的
if(confirm("确定要删除吗？")){
$(":checkbox[name=ckb]:checked").parent().parent().remove()
changenum()
}
}
//function all_del(){
//
//}
//叉号隐藏
function hid(){
$("#re").hide()
}
function sho(){
$("#re").show()
}
function addstudent(){
if(!checkForm()){
return false;
}
var tr='<tr>'
tr+='<td>'
tr+='<input type="checkbox" name="ckb"/>'
tr+='</td>'
tr+='<td>'+$("list table tr").length+'</td>'
tr+='<td>'+$("#stuName").val()+'</td>'
tr+='<td>'+$("#stuAge").val()+'</td>'
tr+='<td>'+$(":radio[name=sex]:checked").val()+'</td>'
tr+='<td>'+$("#stuTel").val()+'</td>'
tr+='<td>'+$("#stuGrade").val()+'</td>'
tr+='<td>'+$("#stuEmail").val()+'</td>'
tr+='<td><input type="button" value="删除" name="del"/></td>'
tr+='</tr>'
$("#list table").append(tr)
changenum()
$("#re").hide()
// 清空表单
// reset()重置列表
$("#re_Form")[0].reset()
return false
}
//表单验证
function checkForm(){
// 验证名字
var name=$("#stuName").val()
var r=/^[a-zA-Z]([a-zA-Z]){3,15}$/
if(name==""){
$("#stuName").next().html("姓名不能为空").show()
return false
}else if(!r.test(name)&&(name!="")){
$("#stuName").next().html("填写首不为数字的4-15位").show()
return false
}else if(r.test(name)&&(name!="")){
// 通过hide隐藏span值
$("#stuName").next().hide()
}
// 验证年龄
var age=$("#stuAge").val()
if(age==""){
$("#stuAge").next().html("年龄不能为空").show()
return false
}else if((parseInt(age)<18||parseInt(age)>60)&&(age!="")){
$("#stuAge").next().html("范围为18~60").show()
return false
}else{
// 通过hide隐藏span值
$("#stuAge").next().hide()
}
// 验证手机号码
var tel=$("#stuTel").val()
var r1=/^(13|15|17|18)\d{9}$/
if(tel==""){
$("#stuTel").next().html("手机号码不能为空").show()
return false
}else if(!r1.test(tel)&&(tel!="")){
$("#stuTel").next().html("11位号码").show()
return false
}else if(r1.test(tel)&&(tel!="")){
// 通过hide隐藏span值
$("#stuTel").next().hide()
}
// 验证电子邮箱
var eml=$("#stuEmail").val()
var r3=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/
if(eml==""){
$("#stuEmail").next().html("电子邮箱不能为空").show()
return false
}else if(!r3.test(eml)&&(eml!="")){
$("#stuEmail").next().html("填正确格式").show()
return false
}else if(r3.test(eml)&&(eml!="")){
// 通过hide隐藏span值
$("#stuEmail").next().hide()
}
return true;
}
2.3 Css
代码如下（示例）：
*{
margin: 0;
padding: 0;
}
/*整体表格的控制*/
#list{
margin: 0 auto;
border: 1px solid red;
padding: 20px;
width: 1000px;
}
#list table {
margin: 10px;
width: 100%;
border: 1px solid red;
border-collapse: collapse;
}
#list table tr td,th{
border: 1px solid gray;
text-align: center;
padding: 5px;
}
#list table tr th{
background-color: orange;
}
#list table tr:nth-of-type(odd){
background-color: gainsboro;
}
/*表单的控制*/
#re{
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
}
#re_Form{
position: fixed;
left: 50%;
top: 50%;
margin-left:-225px ;
margin-top:-225px ;
background-color:white ;
padding: 10px;
border: 1px solid red;
width: 450px;
}
#title{
padding: 10px;
overflow: hidden;
}
#title h2{
float: left;
}
#title span{
float: right;
}
#re_Form p {
padding: 5px;
}
#re_Form p label{
display:inline-block;
width: 100px;
/*border: 1px solid red;*/
text-align: right;
}
#re_Form p input[type=submit]{
border: 1px solid red;
display: block;
border-radius:15px ;
background-color: orange;
padding: 10px 30px;
margin: 10px auto;
}
.tip{
color: red;
display: none;
3 源码
源码已上传到自己的下载中，免费下载：
下载地址
上文的案例是如下的02。
4220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
