在表中显示数组对象

您没有为正在生成的3个<td>生成任何行（即使不需要最后2个<td>的数据，也应该是5个<td>）。

事实上，我完成了表格，其中还包括性别和流派：

1. 使用createElement('tr')和appendChild()，这就是命题数据没有显示在表中的原因。您生成了s，但没有任何<tr>可将它们放入其中。

2. 使用insertCell()用所需的<td> s 填充<tr>

3. 像你一样收集了所有的表单数据，除了我对最后两个数据字段做了以下操作：

   3A。对于我使用的性别：

     `document.querySelector('input[name="gender"]:checked').value;`
   

   3B。对于我使用的流派：

   • .elements HTMLCollection来收集form#genre（我在表单中添加了#genre和[name="genre"]）。

   • 循环通过genre.items().checked

   • 提取每个genre.items().checked 的值

   • 制作了一系列结果。

4. 使用addEventListener()稍微更改了事件处理。现在，JavaScript之神将友好地看待您的代码P

下面是一个工作示例，一个小缺陷是，如果不是"戏剧"，流派中的最后一个项目将有一个逗号,。在帖子末尾提供的参考资料。

摘录

var actors, i;
var Info = [{
  firstName: "Jason",
  lastName: "Statham",
  birth: "July 26, 1967",
  gender: "Male",
  genre: "Action, Crime, Thriller"
}, {
  firstName: "Mark",
  lastName: "Wahlberg",
  birth: "June 5, 1971",
  gender: "Male",
  genre: "Action, Comedy, Drama"
}];
var displayActors = function(actors) {
  var str = "<table class='table'>";
  str += "<tr>";
  str += "<th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Gender</th><th>Genre</th>";
  str += "</tr>";
  for (i = 0; i < actors.length; i++) {
    str += "<tr>";
    str += "<td>" + actors[i].firstName + "</td>";
    str += "<td>" + actors[i].lastName + "</td>";
    str += "<td>" + actors[i].birth + "</td>";
    str += "<td>" + actors[i].gender + "</td>";
    str += "<td>" + actors[i].genre + "</td>";
    str += "</tr>";
  }
  str += "</table>";
  document.getElementById("actorGrid").innerHTML = str;
}
window.onload = function() {
  displayActors(Info);
}
document.getElementById("submit").addEventListener('click', function() {
  var table = document.querySelector('.table');
  var tRow = document.createElement('tr');
  table.appendChild(tRow);
  var FN = tRow.insertCell(0);
  var LN = tRow.insertCell(1);
  var DOB = tRow.insertCell(2);
  var SEX = tRow.insertCell(3);
  var GEN = tRow.insertCell(4);
  var fName = document.getElementById("fname").value;
  var lName = document.getElementById("lname").value;
  var dOb = document.getElementById("dob").value;
  var gender = document.querySelector('input[name="gender"]:checked').value;
  var genre = document.getElementById("genre").elements;
  var gens = "",
    i;
  for (i = 0; i < genre.length; i++) {
    var g = genre.item(i);
    if (g.checked) {
      var story = g.value;
      if (i === genre.length - 1) {
        gens += story;
      } else {
        gens += story + ", ";
      }
    } else {
      gens += '';
    }
  }
  FN.innerHTML = fName;
  LN.innerHTML = lName;
  DOB.innerHTML = dOb;
  SEX.innerHTML = gender;
  GEN.innerHTML = gens;
}, false);

<label>First Name</label>
<br />
<input type="text" id="fname" />
<br />
<label>Last Name</label>
<br />
<input type="text" id="lname" />
<br />
<label>Date of Birth</label>
<br />
<input type="date" id="dob" />
<br />
<form action="">
  <label>Gender:</label>
  <br />Male
  <input type="radio" name="gender" value="Male" id="male" />Female
  <input type="radio" name="gender" value="Female" id="female" />
  <br />
</form>
<form id="genre" name="genre" action="">
  <label>Genre:</label>
  <br />
  <label>Action
    <input type="checkbox" id="action" value="Action" />
  </label>
  <label>Adventure
    <input type="checkbox" id="adventure" value="Adventure" />
  </label>
  <label>Thriller
    <input type="checkbox" id="thriller" value="Thriller" />
  </label>
  <label>Drama
    <input type="checkbox" id="drama" value="Drama" />
  </label>
</form>
<br />
<input type="button" id="submit" value="Add Actor" />
<hr>
<div id="actorGrid"></div>

参考文献

使用JavaScript和DOM接口遍历HTML表

如何获取表单元素的值：复选框和单选按钮

addEventListener

我相信有一些td缺少

试试这个：

var sub = document.getElementById("submit").onclick = function() {
    var fName = document.getElementById("fname").value;
    var lName = document.getElementById("lname").value;
    var dOb = document.getElementById("dob").value;
    var str = "";
    str += "<td>" + Info.push({firstName: fName}) + "</td>";
    str += "<td>" + Info.push({lastName: lName}) + "</td>";
    str += "<td>" + Info.push({birth: dOb}) + "</td>";
    str += "<td></td>";
    str += "<td></td>";
    //Info.push({firstName: fName}, {lastName: lName}, {birth: dOb});
    document.getElementById("actorGrid").innerHTML = str;
    displayActors(Info);
}

嗯。。我猜你忘了把td包装成tr.了

尝试更改提交点击侦听器如下：

var sub = document.getElementById("submit").onclick = function() {
        var fName = document.getElementById("fname").value;
        var lName = document.getElementById("lname").value;
        var dOb = document.getElementById("dob").value;
        var str = "<tr>";
        str += "<td>" + Info.push({firstName: fName}) + "</td>";
        str += "<td>" + Info.push({lastName: lName}) + "</td>";
        str += "<td>" + Info.push({birth: dOb}) + "</td>";
        str += "</tr>";
        //Info.push({firstName: fName}, {lastName: lName}, {birth: dOb});
        document.getElementById("actorGrid").innerHTML = str;
        displayActors(Info);
    }

希望这能有所帮助。

正如@Agu V所回答的，你错过了tds。