我有一個帶有表單和表格的 HTML 頁面。在一個js檔案中，我有一個物件串列 (JSON)，并使用此串列在頁面加載時填充表格。
該表單應該允許我向串列中添加一個元素，然后將其顯示為表格中的新行。
這是我的 js 檔案：
var data = [
{
"first_name": "John",
"last_name": "Smith",
"email": "[email protected]",
"job": "CEO",
"agree": true
},
{
"first_name": "Marie",
"last_name": "Curie",
"email": "[email protected]",
"job": "Researcher",
"agree": true
}];
populateTable();
function populateTable() {
var out = "<table><tr>"
"<th>First Name</th><th>Last Name</th>"
"<th>Email</th>"
"<th>Job</th><th>Agree</th></tr>";
var i;
for (i = 0; i < data.length; i ) {
out = '<tr><td>' data[i].first_name '</td><td>' data[i].last_name '</td><td>'
data[i].email '</td><td>' data[i].job '</td><td>' data[i].agree '</td></tr>';
}
document.getElementById("showData").innerHTML = out;
};
function collectData(){
var TestName = document.getElementById("fname").value;
var TestSurname = document.getElementById("lname").value;
var TestEmail = document.getElementById("email").value;
var TestJob = document.getElementById("job").value;
var TestAgree = document.getElementById("agree_terms").value;
//insert this data on JSON file
var jsonObject = {
"first_name": TestName,
"last_name": TestSurname,
"email": TestEmail,
"job": TestJob,
"agree": TestAgree
};
data.push(jsonObject);
}
我試圖將新元素推送到串列中，但代碼自然會重新加載函式populateTable()而不考慮這個新元素。
我能解決嗎？
uj5u.com熱心網友回復：
在函式末尾添加 populateTable
var data = [
{
"first_name": "John",
"last_name": "Smith",
"email": "[email protected]",
"job": "CEO",
"agree": true
},
{
"first_name": "Marie",
"last_name": "Curie",
"email": "[email protected]",
"job": "Researcher",
"agree": true
}];
populateTable();
function populateTable() {
var out = "<table><tr>"
"<th>First Name</th><th>Last Name</th>"
"<th>Email</th>"
"<th>Job</th><th>Agree</th></tr>";
var i;
for (i = 0; i < data.length; i ) {
out = '<tr><td>' data[i].first_name '</td><td>' data[i].last_name '</td><td>'
data[i].email '</td><td>' data[i].job '</td><td>' data[i].agree '</td></tr>';
}
document.getElementById("showData").innerHTML = out;
};
function collectData(){
var TestName = "Demo";
var TestSurname = "Demo";
var TestEmail = "Demo";
var TestJob = "Demo";
var TestAgree = "Demo";
//insert this data on JSON file
var jsonObject = {
"first_name": TestName,
"last_name": TestSurname,
"email": TestEmail,
"job": TestJob,
"agree": TestAgree
};
data.push(jsonObject);
populateTable();
console.log("Click");
}<div id="showData">
</div>
<button onclick="collectData()">
Add Demo Data
</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/443559.html
標籤：javascript html json 列表