Ввод элемента в массив

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 - это именно то, как вы читаете значения из элементов формы.