Question

我有一个包含信息的JS数组。我想填充某种可重复的对象，以便我可以以相同的方式显示所有信息（格式化）。我假设我需要使用HTML表单，但现在无法弄清楚如何使用我的JS数组中的信息来填充它。我希望在页面加载时实现这一点，但是现在我正试图用一个按钮来测试它。

<html>  
<head>
</head>  
<body>

<script>
var myArray = [
 {
  "title"  : "My First Place",
  "address": "My First Address",
 },
 {
  "title"  : "Treehouse",
  "address": "off in the woods",
 },
 {
  "title"  : "My New Place",
  "address": "Home Sweet Home",
 }
 ];
function addRow() {
  var itm = document.getElementById("infoArea");

  var cln = itm.cloneNode(true);

  for(var i = 0; i < myArray.length; i++){
    document.getElementById("repeatafterme").appendChild(cln);
  }
}

</script>
<div id="repeatafterme"></div>
<form name="myform" id="infoArea">
<fieldset>
<legend><label id="myFormID"><output name="title"></output><label></legend>
       <label><output name="address"></output></label>
</fieldset>
</form>
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="addRow()">
</body>
</html>

Answer 1

itm.cloneNode(true)必须在块中，并为元素new设置不同的id。

要设置数组title的值，address应该访问子元素以获取元素out

function addRow() {
var itm = document.getElementById("infoArea");

 for(var i = 0; i < myArray.length; i++){
   var cln = itm.cloneNode(true);
   cln.id = "id" + i;
   var outTitle = cln.childNodes[1].childNodes[1].childNodes[0].childNodes[0];

   outTitle.value = myArray[i].title;

   var outAddress = cln.childNodes[1].childNodes[3].childNodes[0];

   outAddress.value = myArray[i].address;


   document.getElementById("repeatafterme").appendChild(cln);
  }
}

结果：https://jsfiddle.net/cmedina/sL0v07tt/1/

从JS数组创建可重复的HTML表单和加载信息

1 个答案: