如何將JavaScript數組綁定到動態HTML表？

Question

我想在下面使用javascript創建的表中添加所有文本框的值，操作列也應包含兩個按鈕作為編輯和刪除，以更新和刪除文本框的值。

我創建了一個數組來保存文本框的值。 現在，單擊“保存”按鈕，我想使用Javascript（而不是angularJS或jQuery）將這些值添加到動態HTML表中。 {

    var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;
    var address = document.getElementById("address").value;
    var email = document.getElementById("email").value;

}

Answer 1

這樣的事嗎？

 function updateTable() { var values = { id: document.getElementById("id").value, name: document.getElementById("name").value, gender: document.getElementById("gender").value, address: document.getElementById("address").value, email: document.getElementById("email").value }; var table = document.getElementById("table"); Object.keys(values).forEach(function (key) { table.getElementsByClassName(key + "Row")[0] .getElementsByClassName("value")[0] .textContent = values[key]; }); } document.getElementById("updateTable").addEventListener("click", updateTable); 

 /* Purely cosmetic */ body { font-family: sans-serif; } h1 { margin: 1em 0 0 0; font-size: 2em; } #inputs { display: table; } #inputs > span { display: table-row; } #inputs label, #inputs input { display: table-cell; } td { border: 1px solid #aaa; } 

 <h1>Inputs</h1> <form id="inputs"> <span> <label for="id">ID</label> <input id="id"> </span><span> <label for="name">Name</label> <input id="name"> </span><span> <label for="gender">Gender</label> <input id="gender"> </span><span> <label for="address">Address</label> <input id="address"> </span><span> <label for="email">Email</label> <input id="email"> </span> </form> <h1>Table</h1> <table id="table"> <tr class="idRow"><td class="label">ID</td><td class="value"></td></tr> <tr class="nameRow"><td class="label">Name</td><td class="value"></td></tr> <tr class="genderRow"><td class="label">Gender</td><td class="value"></td></tr> <tr class="addressRow"><td class="label">Address</td><td class="value"></td></tr> <tr class="emailRow"><td class="label">Email</td><td class="value"></td></tr> </table> <button id="updateTable">Update table</button> 

Answer 2

嘗試這個：

function save() {
    var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;
    var address = document.getElementById("address").value;
    var email = document.getElementById("email").value;
    var table = document.getElementById('table');
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + [id,name,gender,adress,email,"save"].join('</td><td>') + '</td>';
    table.appendChild(tr);
}

Answer 3

這是我的小提琴

var mytable = [];
function Tbl() {
        var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;
    var address = document.getElementById("address").value;
    var email = document.getElementById("email").value;
    var obj = {
        "id": id,
      "name": name,
      "gender": gender,
      "address": address,
      "email": email
    };
    mytable.push(obj);
    //create table
    var html = "<table>";
    mytable.forEach(function(entry) {
        html += "<tr>";
        for (var k in entry){
                html += "<td>" + entry[k] + "</td>";
        }
        html += "</tr>";
    });
    html += "</table>";
    document.getElementById("result").innerHTML = html;
}