效果图如下
部分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>页 <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代码实现
点击确定按钮代码:
其他部分代码: