配列にアイテムを入れる

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

あなたがテーブル全体を再レンダリングしてOKであれば、私はあなたのクリックイベントハンドラは、ちょうどあなたの質問に関しては

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

ことができると信じて、Array#pushはあなたが追加することができます正確にどのようにあります配列の新しい値とvalueプロパティは、フォーム要素から値を読み取る方法とまったく同じです。