将一个项目放在一个数组中

Question

我试图在数组中添加一个演员时将其显示在表格中，将数组中的演员显示到表格中。对于每个演员，我应该能够更新和删除它们。

我不确定如何从html中获取值以显示在表格中。

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").onclick = function() { 
 
    var fName = ""; 
 
\t var str = "<table class='table'>"; 
 
    fName = document.getElementById("fname").value; 
 
    if(fName != "") { 
 
\t \t str += "<tr>"; 
 
\t \t str += "<td>" + Info.push({firstName: fName}) + "</td>"; 
 
\t \t str += "</tr>"; 
 
    } 
 
    str += "</table>"; 
 
    document.getElementById("actorGrid").innerHTML += str; 
 
}

<div class="main"> 
 
    <h2 class="ad">Add Actors</h2> 
 
    <div id="add"> 
 
     <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> 
 
    <div id="actorGrid"></div> 
 
</div>

Answer 1

如果你是重新描绘整个表行，那么我相信你的点击事件处理程序可以只是

document.getElementById("submit").onclick = function() { 
    var fName = document.getElementById("fname").value; 
    Info.push({firstName: fName}); 
    displayActors(Info); 
}; 

关于你的问题，Array#push正是你如何添加数组的新值和value属性正是您如何从表单元素中读取值的方式。