使用 JS 从数组对象填充表

Question

我必须制作一个库应用程序，它接受用户的输入并将其存储在网页上的表格中。两天来一直在努力解决这个问题，主要是因为我是初学者并且不理解发布的大多数高级代码，所以我什至会问你是否可以让你的代码对初学者友好。

所以，我有一个表单，可以输入作者、标题、页数、年份、是否已阅读图书的复选框以及删除图书的按钮。 id = author、title、pages、year、read，分别是 deleteBtn 的一个类。

和一个只有标题的html表格模板，目的是用JS填充它：

<div id="wrapperDiv">
    <table id="table">
        <thead>
            <th class=titleTh>Title:</th>
            <th>Author:</th>
            <th>Pages:</th>
            <th>Year:</th>
            <th>Read status:</th>
            <th>Edit:</th>
        </thead>
        <tbody id="tbody">    
            <!--add with javascript-->
        </tbody>
    </table>
</div>

和 JS，我有这个：

//book array
let books = [];

//saving user input in Object
const addBook =(ev)=>{
ev.preventDefault();

let book = {
    title:document.getElementById("title").value, //.value gives what the user has written
    author:document.getElementById("author").value,
    pages:document.getElementById("pages").value,
    year:document.getElementById("year").value,
    read:document.getElementById("read").checked,
    //edit:document.getElementById("edit").value, 
}
console.log(book);

books.push(book);
document.forms[0].reset(); //clear form for next input
//document.querySelector("form").reset(); same thing
console.log("pushed book")
console.log(books);

localStorage.setItem("BookList", JSON.stringify(books));
//var tbody = document.getElementById("tbody");
var row = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var td5 = document.createElement("td");  
td5.classList.add("checkTd");
var td6 = document.createElement("button");
td6.innerHTML = "Delete";
td6.classList.add("deleteBtn");

td1.innerHTML = document.getElementById("title").value;
td2.innerHTML = document.getElementById("author").value;
td3.innerHTML = document.getElementById("pages").value;
td4.innerHTML = document.getElementById("year").value;
td5.innerHTML = document.getElementById("read").checked;

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);

table.children[0].appendChild(row);  
} 

document.addEventListener("DOMContentLoaded", ()=>{
document.getElementById("submitBook").addEventListener("click", addBook);
})

所以当我输入字段时，数组就会生成，如下所示：

[0] 对象 {

​​​标题：《权力的游戏》

作者：“乔治·马丁”

页数：“8000”

​​年份：“2005”

阅读：是的

}

表格中的可视行也会生成，但它始终是空的。此外，无论我编写哪种 if else 语句，网页上的复选框始终为“假”（即使数组中为真）。请帮忙。 ​​

Answer 1

如果我根据您的要求是正确的，您可以映射书籍数组并为每本书返回一个行元素，最后，使用行数组，您可以将其附加到正文。

let books = [{
  title: 'Book 1', //.value gives what the user has written
  author: 'Author 1',
  pages: '10',
  year: 2020,
  read: false,
}, {
  title: 'Book 2', //.value gives what the user has written
  author: 'Author 2',
  pages: '10',
  year: 2021,
  read: false,
}];


let tbody = document.getElementById("tbody");

books.forEach((book) => {
  let row = document.createElement("tr");
  let td1 = document.createElement("td");
  let td2 = document.createElement("td");
  let td3 = document.createElement("td");
  let td4 = document.createElement("td");
  let td5 = document.createElement("td");
  td5.classList.add("checkTd");
  var td6 = document.createElement("button");
  td6.innerHTML = "Delete";
  td6.classList.add("deleteBtn");

  td1.innerHTML = book.title
  td2.innerHTML = book.author;
  td3.innerHTML = book.pages;
  td4.innerHTML = book.year;
  td5.innerHTML = book.read;

  row.appendChild(td1);
  row.appendChild(td2);
  row.appendChild(td3);
  row.appendChild(td4);
  row.appendChild(td5);
  row.appendChild(td6);
  // append the row element 
  tbody.appendChild(row);
});

<div id="wrapperDiv">
    <table id="table">
        <thead>
            <th class=titleTh>Title:</th>
            <th>Author:</th>
            <th>Pages:</th>
            <th>Year:</th>
            <th>Read status:</th>
            <th>Edit:</th>
        </thead>
        <tbody id="tbody">    
            <!--add with javascript-->
        </tbody>
    </table>
</div>

就可读性和性能而言，这可能不是非常理想的解决方案，应该可以满足您的需求。