在表格中显示数组对象

Question

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

我需要添加一个新演员并将其显示在表格中，就像显示前两个一样。

 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); } 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>"; //Info.push({firstName: fName}, {lastName: lName}, {birth: dOb}); document.getElementById("actorGrid").innerHTML = str; displayActors(Info); }

 <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 action=""> <label>Genre:</label><br /> <label>Action<input type="checkbox" id="action"/></label> <label>Adventure<input type="checkbox" id="adventure"/></label> <label>Thriller<input type="checkbox" id="thriller"/></label> <label>Drama<input type="checkbox" id="drama"/></label> </form> <br /><input type="button" id="submit" value="Add Actor" /> <hr> <div id="actorGrid"></div>

Answer 1

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

我实际上完成了表格以包括性别和类型：

1. 使用createElement('tr')和appendChild()这就是为什么数据没有出现在表中的原因。 您生成了 s 但没有任何<tr>可以放入它们。

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

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

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

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

   3B。 对于我使用的类型：

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

   • 循环遍历genre.items().checked

   • 提取每个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 表

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

添加事件监听器

Answer 2

我相信缺少一些 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);

}

Answer 3

嗯..我猜你忘了把 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。