我们之前的进入小工具的页面已经成功了。
本节课就来实际做一下：
所谓正交，其实就是对 多个输入条件 的多个子状态，生成用例的方法。
我们先要做的就是前端的交互。其实很简单，就是个表格，类似于我们接口请求体的form-data那种可以自行增加行数的表格，每行分为key和value，key就是输入条件的名称，value，就是具体的多个子状态（用/隔开）
但是我并不打算去复制那套第三方打的表格，而是准备自己重写一个简易版本。
首先我们在正中央新建一个div，作为容器
然后我们在里面添加内容，再写个div作为，多行输入框的容器
如上图，利用的是bootstrap3的输入框组。我这里写的就是个展示用的demo，之后用js进行动态生成的时候，好照着这个输入框组进行生成。
效果如下：
然后我们去做俩个按钮，一个添加，一个运行
为什么不做删除？因为麻烦～ 不想要的 把输入条件空着就行，系统不会对其进行计算的。
然后我们先搞定这个添加功能：
这个add函数要用来给div 增加子标签，也就是那个输入框组：
现在的效果如下：
点击进添加按钮
这里我们学到了一个新技巧，复制，我们之前的这种功能做法，是用creatElement的方式创建一个新的，然后添加到容器中，不过现在我们学习了新的方法，直接复制，简单快捷。
接下来就是运行功能。我们去写个运行函数：
这个运行功能，应该做什么事呢？
- 获取上述表格的所有输入，并过滤掉名字为空的行。
- 然后调用接口，把数据发给后台，并等待后台的结果。
- 把结果展示出来。
我们一步一步来：
如上图，我们利用输入框的name都一样的优点，直接拿到所有。然后声明了俩个空列表用来存放。然后进行一个遍历循环，判断只要名字不是空，就给这一对都加入到俩个空列表中。
测试一下提取是否正确：
看来，提取是成功了。
