在javascript中构建自迭代表？

在我的代码中，我获取用户输入，保存它们并将它们传递给API。然后我需要将这些用户输入输出到一个表中。每次用户按下按钮提交数据时，我都需要添加一行新的用户输入

我已经阅读了用javascript构建表的内容，但显然我在表中使用ID来传递变量，并且不确定如何迭代使用用户输入创建的表以及元素的ID

我在下面的html中找到了一个解决方法，但它允许有限的输入，而且非常草率，我相信有更好的学习方法

非常感谢

功能：

function writeFName() {

var fNameGroup = document.querySelector('#fName_Input').value;
first_name = document.querySelector('#fName_Input').value;

localStorage.setItem('fName-group', fNameGroup);

var cfmF = confirm("Did you mean to enter: \n" + fNameGroup + '?');

if (cfmF) {
    console.log(fNameGroup);
    window.alert('Success!');

    first_name = localStorage.getItem('fName-group');

    document.querySelector("#firstname" + CSS.escape(x)).innerHTML = first_name;
    x++
} else {
    window.alert('Please Re-Enter First Name');
}
}


<div id="outputTable">
<table>
<tr>
<th> First Name </th>hg
<th> Last Name  </th>
<th> Email      </th>
    </tr>
<tr>
<td id="firstname"></td>
<td id="lastname"></td>
<td id="email"></td>
</tr><tr>
<td id="firstname1"></td>
<td id="lastname1"></td>
<td id="email1"></td>
</tr><tr>
<td id="firstname2"></td>
<td id="lastname2"></td>
<td id="email"></td>
</table>

函数writeFName（）{
var fNameGroup=document.querySelector（“#fName_Input”）.value；
first_name=document.querySelector（'fName_Input'）.value；
setItem（'fName-group'，fNameGroup）；
var cfmF=confirm（“您的意思是输入：\n”+fNameGroup+'？”）；
如果（cfmF）{
console.log（fNameGroup）；
window.alert（'Success！'）；
first_name=localStorage.getItem（'fName-group'）；
document.querySelector（“#firstname”+CSS.escape（x））.innerHTML=first#u name；
x++
}否则{
window.alert（'请重新输入名字'）；
}
}
名字hg
姓
电子邮件

工作示例：向表中动态添加新行

您可以通过创建元素，然后需要使用将这些元素添加到DOM中

名字
姓
电子邮件
函数appendToTable（firstName、lastName、emailAddress）{
var table=document.getElementById（“dynamicTable”）；
var tr=document.createElement（“tr”）；
var firstNameTD=document.createElement（“td”）；
var lastNameTD=document.createElement（“td”）；
var emailAddressTD=document.createElement（“td”）；
表1.儿童（tr）；
tr.appendChild（firstNameTD）；
tr.appendChild（lastNameTD）；
tr.appendChild（emailAddressTD）；
firstNameTD.textContent=firstName；
lastName td.textContent=lastName；
emailAddressTD.textContent=电子邮件地址；
}
附件（“约翰”、“能源部”、“电子邮件1@address”）；
附件（“Jane”、“Doe”、“email 2@address”）；
附件（“另一个”、“一个”、“电子邮件3@地址”）；

请查看我使用jquery、css和bootstrap制作的表格插件的工作示例。您可以添加多行并编辑输入字段

按钮单击时添加多行的代码 $（“#btnAdd”）。单击（函数（）{ var html='请选择开发测试语言管理删除完成 ' $（'tbody'）.append（html）； });

---

您没有问特定的问题。TLDR：如何在用户每次单击按钮时创建一行新的用户输入数据，这样每次调用函数时，都会创建一行新行，因此不需要迭代。有道理，谢谢老兄。每次我运行它都会出错。无法读取null的属性“appendchild”。我已经将脚本移到了页面底部，但仍然无效。如果您愿意的话，我已经在这里粘贴了我的代码。删除您在开篇文章示例中使用的HTML代码，并用我的示例中提供的代码替换。它失败了，因为它找不到仍然接收相同的错误，即即使在粘贴html代码后也不能附加属性“appendchild”或null。这是因为DOM尚未完成加载吗？请将HTML放在文件的顶部，并将javascript代码放在其后的任意位置。

<table id="dynamicTable">
<tr>
<th> First Name </th>
<th> Last Name  </th>
<th> Email      </th>
    </tr>
<tr>
<td id="firstname"></td>
<td id="lastname"></td>
<td id="email"></td>
</tr>
</table>


function appendToTable(firstName, lastName, emailAddress) {
   var table = document.getElementById("dynamicTable");

   var tr = document.createElement("tr");

   var firstNameTD = document.createElement("td");
   var lastNameTD =  document.createElement("td");
   var emailAddressTD =  document.createElement("td");

   table.appendChild(tr);

   tr.appendChild(firstNameTD);
   tr.appendChild(lastNameTD);
   tr.appendChild(emailAddressTD);

   firstNameTD.textContent = firstName;
   lastNameTD.textContent = lastName;
   emailAddressTD.textContent = emailAddress;
}

appendToTable("John", "Doe", "email 1 @ address");
appendToTable("Jane", "Doe", "email 2 @ address");
appendToTable("Another", "one", "email 3 @ address");

code for adding Multiple rows on button click


$("#btnAdd").click(function(){ 
var html = '<tr><td><input class="name" type="text"/></td><td><input 
type="text" class="designation"/></td><td><select class="Department"><option 
selected >Please Select</option><option 
value="Development">Development</option><option 
value="Testing">Testing</option><option value="UI">UI</option><option 
value="3">Management</option></select></td><td><button class="btn- btn-link 
delete">Delete</button> <button class="btn- btn-link done">Done</button> </td> 
</tr>'
$('tbody').append(html); 
});