分析
利用js数据生成表单,可以想象最主要的便是对追加 append()方法的使用。当然要动态追加必不可少的肯定是先创建元素,再进行追加。
这里我们使用了document.createElement("input")来创建input元素,然后将input追加上去$("form").append(input)。
这样我们就追加了一条表单元素。
要想根据数据来生成,我们不妨利用数组和对象的特性,将数据根据键值对存在对象中在将其放在数组中。用循环将数组遍历,有多少数据,就循环多少次,并且随之创建和追加元素。然后根据数组的索引值再和每次创建追加的元素进行对应,键对应input的名称,值对应input框里的值,这个时候我们就已经完成了。
具体js代码如下:
for (var i = 0; i < (datas.length);i++ ){
let div = document.createElement("div")
let ipt = document.createElement("input")
let p = document.createElement("p")//循环创建input
$("form").append(div); //将input和p都装在div盒子里,方便设置样式
$(div).append(ipt)// 追加input
$(ipt).before(p)
p.innerHTML = datas[i].name //将属性名和值赋给每个input
ipt.value = datas[i].value;
}