<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
</head>
<body>
<section class="container">
<h2 class="text-center">学生信息表</h2>
<!-- 表单 -->
<form class="form-horizontal">
<div class="form-group">
<label for="inputName" class="col-sm-3 col-sm-offset-1 control-label">学生姓名:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputName" placeholder="学生姓名">
</div>
</div>
<!-- form-group充当的就是row -->
<div class="form-group">
<label for="inputPhone" class="col-sm-3 col-sm-offset-1 control-label">联系方式:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputPhone" placeholder="联系方式">
</div>
</div>
<div class="form-group">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-success" id="addStuInfoBtn">
<span class="glyphicon glyphicon-plus"></span> 添加信息
</button>
<button type="button" class="btn btn-warning" id="confirEditBtn" style="display:none">
<span class="glyphicon glyphicon-ok"></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-warning text-center" role="alert" id="warning" style="display:none">暂无数据......</div>
<!-- 模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<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 text-danger" id="tips">您确定要删除吗？？？</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary btn-danger" data-dismiss="modal" id="confimBtn">确定</button>
</div>
</div>
</div>
</div>
</section>
</body>
<script src="lib/jquery/jquery.min-v1.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</html>
js代码：
(function ($) {
var data = [{
id: 'ID1505043900575',
name: '小黑',
phone: 1232222
},
{
id: 'ID1505043903711',
name: '小白',
phone: 1233333
},
{
id: 'ID1505043906767',
name: '小花',
phone: 1234444
},
{
id: 'ID1505043941174',
name: '小小',
phone: 1235555
}
];
function OperateData(data) {
this.data = data;
}
OperateData.prototype = {
constructor: OperateData,
addData: function (name, phone) {
var data = {
id: 'ID' + new Date().getTime(),
name: name,
phone: phone
};
this.data.push(data);
CreateDom.prototype.creaTr.apply(this);
},
delData: function (index) {
this.data.splice(index, 1);
CreateDom.prototype.creaTr.apply(this);
return this.data.length;
},
editData: function (index, id, name, phone) {
this.data[index] = {
id: id,
name: name,
phone: phone
};
CreateDom.prototype.creaTr.apply(this);
},
clearData: function () {
this.data = [];
CreateDom.prototype.creaTr.apply(this);
}
}
function CreateDom(data) {
this.data = data;
}
CreateDom.prototype.creaTr = function () {
var str = '';
for (var i = 0; i < this.data.length; i++) {
str += '<tr class="text-center">';
str += '<th class="text-center">' + this.data[i].id + '</th>';
str += '<td>' + this.data[i].name + '</td>';
str += '<td>' + this.data[i].phone + '</td>';
str += '<td><button type="button" class="btn btn-default btn-sm btn-edit">';
str += '<span class="glyphicon glyphicon-edit"></span> 编辑</button> ';
str += '<button type="button" class="btn btn-default btn-sm btn-del" data-toggle="modal" data-target=".bs-example-modal-sm">';
str += '<span class="glyphicon glyphicon-remove-sign"></span> 删除';
str += '</button></td>';
}
str += '<tr><td colspan="3"></td><td class="text-center">';
str += '<button type="button" class="btn btn-danger btn-trash" data-toggle="modal" data-target=".bs-example-modal-sm">';
str += '<span class="glyphicon glyphicon-trash"></span> 清空</button>';
str += '</td></tr>';
$('#showData').html(str);
};
var index = 0;
$(function () {
var tr = new CreateDom(data);
var oper = new OperateData(data);
tr.creaTr();
$('#addStuInfoBtn').on('click', function () {
var _name = $('#inputName').val();
var _phone = $('#inputPhone').val();
oper.addData(_name, _phone);
$('#inputName').val('');
$('#inputPhone').val('');
$('#table').show();
$('#warning').hide();
});
$('#showData').on('click', '.btn-del', function () {
index = $(this).parent().parent().index();
$('#tips').text('您确定要删除吗？？？');
showOrHide();
});
$('#showData').on('click', '.btn-edit', function () {
index = $(this).parent().parent().index();
var _phone = $(this).parent().prev().text();
var _name = $(this).parent().prev().prev().text();
$('#inputName').val(_name);
$('#inputPhone').val(_phone);
$('#addStuInfoBtn').hide();
$('#confirEditBtn').show();
});
$('#confirEditBtn').on('click', function () {
var _id = 'ID' + new Date().getTime();
var _name = $('#inputName').val();
var _phone = $('#inputPhone').val();
oper.editData(index, _id, _name, _phone);
showOrHide();
});
$('#showData').on('click', '.btn-trash', function () {
index = -2;
$('#tips').text('您确定要清空吗？？？');
showOrHide();
});
$('#confimBtn').on('click', function () {
if (index === -2) {
oper.clearData();
$('#table').hide();
$('#warning').show();
return;
}
var len = oper.delData(index);
if (!len) {
$('#table').hide();
$('#warning').show();
}
});
function showOrHide() {
$('#addStuInfoBtn').show();
$('#confirEditBtn').hide();
$('#inputName').val('');
$('#inputPhone').val('');
}
})
})(jQuery);