持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

上一篇我们编写了人员管理界面，并将人员的基本信息数据展示出来，这一篇讲如何在表格里增加功能按钮。

我已经设置了公开权限，大家都可以访问，项目每天的进度基本上是和文章更新一致的，或者略快于文章，我也是边写边发的，有些代码在后续版本说不定就更改了。代码的字数意义不大，有需要的都可以去项目上直接看，这里我都换成了图片。

一、界面

这里在数据后面增加了编辑按钮，可以点击按钮来编辑这条数据。

二、实现过程

首先在页面的body部分增加模态框

模态框一般分为4层，最顶层就是个容器，modal-content内部会分头部、主干和脚部三个主要部分。一般头部用来放标题和关闭按钮，主干放你想要展示的东西，脚部放功能按钮。组合起来用于控制显示出来的内容。

再在我们上次的表格列中，加入编辑列

events属性可以添加我们对按钮的点击操作，也可以有些别的操作。这里的事件是编辑按钮点击后进行了模态框数据的初始化操作。

在jquery中val方法和value属性对同一个对象千万不能同时操作，不然会出现值设置不了的情况。

此时我们再给这个修改按钮添加点击事件，增加提交数据的函数，这样我们就可以提交给后台进行处理了。下一篇将对页面提交修改数据和后台接收数据进行编写。