构造函数的demo练习
来源：互联网 发布：ual研究生 留学 知乎 编辑：程序博客网 时间：2024/06/05 11:24
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"/> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--></head><body><section class="container text-center"> <h2>学生信息表</h2> <!--输入--> <form class="form-horizontal"> <div class="form-group"> <label for="stuName" class="col-sm-4 control-label">学生姓名</label> <div class="col-sm-5"> <input type="text" class="form-control" id="stuName" placeholder="学生姓名"> </div> </div> <div class="form-group"> <label for="phone" class="col-sm-4 control-label">联系方式</label> <div class="col-sm-5"> <input type="text" class="form-control" id="phone" placeholder="联系方式"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <button type="button" class="btn btn-default btn-warning" id="addInformation"><span class="glyphicon glyphicon-plus"></span> 添加信息 </button> <button type="button" class="btn btn-default btn-info" id="confirmEdit" style="display: none;"><span class="glyphicon glyphicon-edit"></span> 确认编辑 </button> </div> </div> </form> <!--表格--> <table class="table table-hover" id="table"> <thead> <tr> <th class="text-center col-sm-3">学号</th> <th class="text-center col-sm-3">学生姓名</th> <th class="text-center col-sm-3">联系方式</th> <th class="text-center col-sm-3">操作</th> </tr> </thead> <tbody id="showData"> </tbody> </table> <div class="alert alert-success" role="alert" style="display: none" id="noData">暂无数据。。。</div> <!--模态框--> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">确定要删除吗？</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="confirm">取消</button> <button type="button" class="btn btn-danger" data-dismiss="modal" id="sure">确定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --></section></body><script src="lib/jquery/jquery.min-v1.js"></script><script src="lib/bootstrap/dist/js/bootstrap.min.js"></script><script>(function ($) { /*数据层*/ var data = []; function CreateDom(data) { this.data = data; } CreateDom.prototype.info = function () { var str = ''; for (var i = 0; i < this.data.length; i++) { str += '<tr>'; str += '<td>' + this.data[i].id + '</td>'; str += '<td>' + this.data[i].name + '</td>'; str += '<td>' + this.data[i].phone + '</td>'; str += '<td><button class="btn btn-default edit" ><span class="glyphicon glyphicon-edit"></span> 编辑</button>'; str += ' <button class="btn btn-default del" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove"></span> 删除</button></td>'; str += '</tr>'; } str += '<tr>'; str += '<td colspan="3"></td><td><button class="btn btn-danger clear" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-trash" ></span> 清空所有</button></td>'; str += '</tr>'; $('#showData').html(str); }; function OperateData(data) { this.data = data; } OperateData.prototype = { constructor: OperateData, addInformation: function (name, phone) { var data = { id: 'ID' + new Date().getTime(), name: name, phone: phone }; this.data.push(data); CreateDom.prototype.info.apply(this); }, del: function (index) { this.data.splice(index, 1); CreateDom.prototype.info.apply(this); return this.data.length; }, edit: function (index, name, phone) { this.data[index] = { id: 'ID' + new Date().getTime(), name: name, phone: phone }; CreateDom.prototype.info.apply(this); }, clear: function () { this.data = []; CreateDom.prototype.info.apply(this); } }; /*行为层*/ var index = 0; $(function () { var cre = new CreateDom(data); var oper = new OperateData(data); $('#addInformation').on('click', function () { var n = $('#stuName').val(); var p = $('#phone').val(); if (n == '' || p == '') { alert('请输入内容'); return; } var namereg =/^[\u4E00-\u9FA5A-Za-z]+$/; var reg = /^1[3|4|5|7|8][0-9]{9}$/; if (!(namereg.test(n))) { alert("学生姓名只能输入中文和英文"); return false; } if (!(reg.test(p))) { alert("手机号不是完整的11位手机号或者正确的手机号前七位"); return false; } oper.addInformation(n, p); $('#noData').hide(); $('#table').show(); $('#stuName').val(''); $('#phone').val(''); }); $('#showData').on('click', '.del', function () { index = $(this).parent().parent().index(); $('#addInformation').show(); $('#confirmEdit').hide(); $('#stuName').val(''); $('#phone').val(''); }); $('#sure').on('click', function () { if (!oper.del(index)) { $('#noData').show(); $('#table').hide(); } if (index == -2) { oper.clear(); $('#noData').show(); $('#table').hide(); } }); $('#showData').on('click', '.edit', function () { index = $(this).parent().parent().index(); var n = $(this).parent().prev().prev().text(); var p = $(this).parent().prev().text(); $('#stuName').val(n); $('#phone').val(p); $('#addInformation').hide(); $('#confirmEdit').show(); }); $('#confirmEdit').on('click', function () { var n = $('#stuName').val(); var p = $('#phone').val(); oper.edit(index, n, p); $('#addInformation').show(); $('#confirmEdit').hide(); $('#stuName').val(''); $('#phone').val(''); }); $('#showData').on('click', '.clear', function () { index = -2; $('#addInformation').show(); $('#confirmEdit').hide(); $('#stuName').val(''); $('#phone').val(''); }); })})(jQuery);</script></html>阅读全文
0 0
- 构造函数的demo练习
- C++, 类的构造函数 语法练习
- 构造函数练习
- 构造函数练习
- c#构造函数练习
- 构造函数 课堂练习3：
- C++,类的构造函数重载,语法练习
- 自己的练习二之构造函数与初始化列表
- 自己的练习三之复制构造函数
- C++程序设计语言练习10.15 构造函数的调用时机
- 构造函数综合小练习1
- 构造函数综合小练习2
- 构造函数练习（17/09/24）
- java日常学习：构造函数练习
- 练习Demo
- 练习Demo
- 构造函数的构造顺序
- C++,类的拷贝构造函数,类的申明和实现分开写, 语法练习
- Kotlin语言学习之when表达式使用
- Excel高效实战： 提高桌面生产力（系列06-10）
- VBoxManage: error: Nonexistent host networking interface, name 'vboxnet0' (VERR_INTERNAL_ERROR)
- got error 28 from storage engine mysql
- Monitor by Newrelic
- 构造函数的demo练习
- andriod webview 配置网络权限
- linux关于bashrc与profile的区别(转)
- 对localStorage的封装，使用更简单
- 正则表达式
- DWR 实现数据实时刷新
- Spring Boot快速入门
- MyEclipse10 的正确破解方法
- Spring AOP的八个概念、五个通知类型、AOP的第一种实现方式
