您的位置：首页 > 其它
构造函数的demo练习

2017-10-27 15:30 274 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航