JavaScript实现联系人的增删改查带分页

效果图如下

部分HTML代码：

<div class="container">
	<h3>通讯录</h3>
	<div class="table">
		<div class="title row">
			<div>编号</div>
			<div>姓名</div>
			<div>手机号</div>
			<div>地址</div>
			<div>操作</div>
		</div>
		<div class="content" id="content">


		</div>

		<div class="footer">
			共<span id="recordSpan">0</span>条记录，当前<span id="pageSpan">1/1</span>页&nbsp;&nbsp;&nbsp;<a
				href="javascript:firstPage()">首页</a><a href="javascript:prevPage()">上一页</a><a
				href="javascript:nextPage()">下一页</a><a href="javascript:lastPage()">末页</a>
		</div>
	</div>

	<div class="option">
		<fieldset>
			<legend>用户操作</legend>
			<p>
				<input type="hidden" id="txtId">
				<label>姓名：<input type="text" placeholder="请输入姓名" id="txtName"></label>
			</p>
			<p>
				<label>手机号：<input type="text" placeholder="请输入手机号" id="txtPhone"></label>
			</p>
			<p>
				<label>地址：<textarea name="" id="txtAddress"></textarea></label>
			</p>
			<p>
				<button type="button" id="btnOk">确定</button>
			</p>
		</fieldset>
	</div>
</div>

部分js代码实现

点击确定按钮代码：

其他部分代码：

资源地址，点我下载