上节我们成功搞定了后台算法，并且返回给前端一个二维数组 作为结果
本节我们要想办法在前端来展示这个正交的结果。
最后结果我们仍然是可以通过动态创建来实现的，所以我们先做好存放这个结果的容器div:：
然后通过js的数据动态控制，注意，每行每列都是循环，所以这个算法起码是个二层循环，并且，行数 列数都不固定：
代码如下：
ret = eval(ret); console.log(ret.res); var res_div = document.getElementById('res_div'); res_div.innerHTML = ''; w = (100/end_keys.length).toString()+'%'; //计算输入框宽度 for(var j=0;j<ret.res.length;j++){ var div_group = document.createElement('div'); div_group.className = 'input-group'; var s = document.createElement('span'); s.className = 'input-group-addon'; s.innerText = '用例：'+(j+1).toString(); div_group.appendChild(s); for(var i=0;i<end_keys.length;i++){ var input = document.createElement('input'); input.className = 'form-control'; input.type="text" ; input.style = 'width: -webkit-calc('+w+')'; input.disable = 'disabled'; input.value = end_keys[i]+' : '+ret.res[j][i]; div_group.appendChild(input); } res_div.appendChild(div_group); }
点击运行后效果如图：
到这里，就算成功完成了这个功能了。
大家可以自行测试，然后把截图大胆的发给同事吧～
比如具体的：
