Javascript 在表中显示数组对象

我遇到的问题是，当我添加一个新演员时，信息显示在不同的行中。查看一下

onclick

函数

我需要添加一个新的参与者，并将其显示在表中，就像前两个一样

var参与者，i；
变量信息=[{
名字：“杰森”，
姓氏：“斯塔姆”，
出生日期：“1967年7月26日”，
性别：“男性”，
类型：“动作、犯罪、惊悚片”
}, {
名字：“马克”，
姓：“沃尔伯格”，
出生日期：“1971年6月5日”，
性别：“男性”，
类型：“动作、喜剧、戏剧”
}];
var displayActors=函数（actors）{
var str=“”；
str+=”；
str+=“名字姓氏出生日期GenderGenre”；
str+=”；
对于（i=0；i

名字



姓氏



出生日期



性别：

男性
女性

类型：

行动
冒险
惊悚片
戏剧

我相信有些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);

}

var sub=document.getElementById（“提交”）.onclick=function（）{
var fName=document.getElementById（“fName”）.value；
var lName=document.getElementById（“lName”）.value；
var dOb=document.getElementById（“dOb”）.value；
var str=“”；
str+=“”+Info.push（{firstName:fName}）+“”；
str+=“”+Info.push（{lastName:lName}）+“”；
str+=“+Info.push（{birth:dOb}）+”；
str+=”；
str+=”；
//推送（{firstName:fName}，{lastName:lName}，{birth:dOb}）；
document.getElementById（“actorGrid”）.innerHTML=str；
显示演员（信息）；
}

嗯..我想你忘了把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);
    }

var sub=document.getElementById（“提交”）.onclick=function（）{
var fName=document.getElementById（“fName”）.value；
var lName=document.getElementById（“lName”）.value；
var dOb=document.getElementById（“dOb”）.value；
var str=“”；
str+=“”+Info.push（{firstName:fName}）+“”；
str+=“”+Info.push（{lastName:lName}）+“”；
str+=“+Info.push（{birth:dOb}）+”；
str+=”；
//推送（{firstName:fName}，{lastName:lName}，{birth:dOb}）；
document.getElementById（“actorGrid”）.innerHTML=str；
显示演员（信息）；
}

希望这有帮助

---

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

您没有为正在生成的3

生成任何行（应该是5

，即使您不需要最后2

的数据）

我实际上完成了表格，包括性别和体裁：

使用了

createElement（'tr'）

和

appendChild（）

这就是传统数据未显示在表中的原因。您生成了s，但没有任何

可将其放入

使用

insertCell（）

用所需的

填充

像您一样收集所有表单数据，但我对最后两个数据字段执行了以下操作：

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

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

3B。对于我使用的体裁：

• .elements

  HTMLCollection以收集

  表单#流派

  （我在表单中添加了

  #流派

  和

  [name=“genre”]

  ）

• 循环浏览

  genre.items（）。选中
  

• 提取了每个

  genre.items（）的值。已选中
  

• 制作了一系列的结果

使用

addEventListener（）

稍微更改了事件处理。现在，JavaScript神会对您的代码表示友好：P

下面是一个工作示例，一个小缺陷是，如果不是“戏剧”，体裁中的最后一项将有一个逗号

，

。在文章的最后提供了参考资料

一小条

var参与者，i；
变量信息=[{
名字：“杰森”，
姓氏：“斯塔姆”，
出生日期：“1967年7月26日”，
性别：“男性”，
类型：“动作、犯罪、惊悚片”
}, {
名字：“马克”，
姓：“沃尔伯格”，
出生日期：“1971年6月5日”，
性别：“男性”，
类型：“动作、喜剧、戏剧”
}];
var displayActors=函数（actors）{
var str=“”；
str+=”；
str+=“名字姓氏出生日期GenderGenre”；
str+=”；
对于（i=0；i