接上节课：
不知道跟上的同学有多少，本节最后会附上最新的项目压缩包
我们现在要开始开发form-data:表格，可增删，数据提取出来简单：
这里给大家 选好了一个现成的。地址：
http://down.htmleaf.com/1801/201801271505.zip
下载好后，解压，粘贴到你项目中的static文件夹下：
然后我们在P_apis.html中的 调试弹层div 里面的 下半部分大div 内的 form-data小div 内，写上以下代码：
代码的含义大家不用深究，毕竟是第三方的组件。能用好就可以了。
样式我稍微调过，大家可以直接复制代码：
<div class="table-responsive" style="width: 98%;color: black"> <table class="table table-bordered table-striped" id="mytable" style="background-color:white"> <thead style="color: #337ab7;font-size: x-small"> <tr> <td style="width: 30%">Key</td> <td style="width: 50%">Value</td> </tr> </thead> <tbody> <tr> <td>Username</td> <td>wqrf</td> </tr> <tr> <td>Password</td> <td>123456</td> </tr> </tbody> </table> </div> <button class="btn btn-default" id="add"><i class="fa fa-plus"></i> 添加新参数</button> <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script> <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script> <script type="text/javascript"> $('#mytable').SetEditable({ $addButton: $('#add'), }); </script> 我修改了若干style的宽度和颜色，并且写好了静态资源js的位置路径。大家可直接复制使用。 但是要特别注意 最下面的哪个js ， $('#mytable').SetEditable({ $addButton: $('#add'), });
这里面的 mytable就是我们这个表格的id, 里面的函数目前只有一个添加新参数的功能按钮函数，我们接下来就要手动添加编辑/删除功能了。
先看看页面效果：
我们可以简单测试一下 三个按钮的功能：
添加：
删除和编辑点击报错了，如果有报错。大家不要慌，这是第三方的代码里作者写了一个严格语法标记的问题，我们找到删除即可：
打开bootstable.js
你会看到顶部有一个字符串：use strict
我们删除这行。然后回去刷新页面再测试一下：
点击编辑按钮，那个小铅笔标志的，该行就进入到编辑状态，我们修改后，点击对号按钮，即可修改成功。
然后我们点击删除按钮 测试一下：
删除也成功了。
到这里，我们就算是成功写好了这个form-data的表格。
下节课 我们要用同样表格 解决x-www-form-urlencoded 。届时会触发一个报错，因为这个第三方组件，不支持同一个html内出现多个表格，会互相干扰。所以我们下一节课的主要内容是如何对其进行二次开发，使其可以支持多个表格。
