在javascript中构建一个自迭代表？

Question

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

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

我通过下面的 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>

Answer 1

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

https://codepen.io/yadu_krish/pen/GPgpwQ

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); 
});  

Answer 2

工作示例：https://jsfiddle.net/aL2u1wj9/ 动态向表中添加新行。

您可以通过document.createElement(); 创建元素，然后您需要使用Node.appendChild() 将这些元素添加到DOM。

<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");