如何将表单的值追加到对象数组

Question

我正在构建一个简单的应用程序，该应用程序应将提交的表单文本字段嵌入下表。 我已经制作了一个可添加函数，该函数在手动添加时将库数组对象显示到表中。

现在单击提交按钮后，我需要表单文本字段转到对象数组，并认为由于可添加功能，它也将显示。

function Book(name, author, ReadOrNot) {
this.name = name
this.author = author
this.ReadOrNot = ReadOrNot
}
const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read")
const book3 = new Book("Jane Eyre", "Charlotte Brontë", "Read")
let myLibrary = []
function addBookToLibrary(...arr) {
myLibrary.push(...arr)
}
addBookToLibrary(book1)
addBookToLibrary(book2)
addBookToLibrary(book3)
function addBookToTable() {
let tbody = document.querySelector('tbody')
myLibrary.forEach(b => {
let tr = document.createElement('tr')
let content = '<td>' + b.name + '</td><td>' + b.author + '</td>'
if (b.ReadOrNot == 'Read') {
content += '<td><button id="readbtn" class="btn rdbtn">Read</button></td>'
} else if (b.ReadOrNot == 'Not read') {
content += '<td><button id="readbtn" class="btn rdbtn">Not read</button></td>'
}
content += '<td><button class="btn delbtn" onclick="toggleDelete(this)">Delete</button></td>'
tr.innerHTML = content
tbody.appendChild(tr)
})
}
addBookToTable()
function toggleDelete(o) {
let p = o.parentNode.parentNode;
p.parentNode.removeChild(p);
}

<form>
<div>
<label for="Book">Book</label>
<input type="text" id="Book">
</div>
<div>
<label for="Author">Author</label>
<input type="text" id="Author">
</div>
<div>
<label for="status">Status</label>
<select name="status" id="Status">
<option value="Read">Read</option>
<option value="Not read">Not read</option>
</select>
</div>
<br>
<div>
<button type="submit" class="submit-btn" onclick>Submit</button>
</div>
</form>
<table>
<thead>
<tr>
<td>Name</td>
<td>Author</td>
<td>Status</td>
<td> </td>
</tr>
</thead>
<tbody>
</tbody>
</table>

Answer 1

首先，您需要转换addBookToTable()，使其接受一本书，而不是一次添加所有书籍。 然后，您需要一个函数，该函数从输入字段中读取值并将它们添加到新书中。

const elBook = document.getElementById("Book"),
elAuthor = document.getElementById("Author"),
elStatus = document.getElementById("Status"),
elTbody = document.querySelector('tbody');
function Book(name, author, ReadOrNot) {
this.name = name
this.author = author
this.ReadOrNot = ReadOrNot
}
const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read")
const book3 = new Book("Jane Eyre", "Charlotte Brontë", "Read")

let myLibrary = []

function addBookToLibrary(...arr) {
myLibrary.push(...arr)
}
addBookToLibrary(book1, book2, book3)
function submitBook()
{
if (!elBook.value.trim() || !elAuthor.value.trim())
return false;
const newBook = new Book(elBook.value, elAuthor.value, elStatus.value);
elBook.value = elAuthor.value = "";
elStatus.value = "Read"
addBookToLibrary(newBook);
addBookToTable(newBook);
return false;
}
myLibrary.forEach(addBookToTable);
function addBookToTable(b){
let tr = document.createElement('tr')
let content = '<td>' + b.name + '</td><td>' + b.author + '</td>'
if(b.ReadOrNot == 'Read'){
content += '<td><button id="readbtn" class="btn rdbtn">Read</button></td>'  
}
else if(b.ReadOrNot == 'Not read'){
content += '<td><button id="readbtn" class="btn rdbtn">Not read</button></td>'
}
content += '<td><button class="btn delbtn" onclick="toggleDelete(this)">Delete</button></td>'
tr.innerHTML = content
elTbody.appendChild(tr)
}

function toggleDelete(o) {
let p = o.parentNode.parentNode;
p.parentNode.removeChild(p);
}

<form>
<div>
<label for="Book">Book</label>
<input type="text" id="Book">
</div>

<div>
<label for="Author">Author</label>
<input type="text" id="Author">
</div>

<div>
<label for="status">Status</label>
<select name="status" id="Status">
<option value="Read">Read</option>
<option value="Not read">Not read</option>
</select>

</div>
<br>

<div> 
<button type="submit" class="submit-btn" onclick="return submitBook()">Submit</button>
</div>
</form>
<table>
<thead>
<tr>
<td>Name</td>
<td>Author</td>
<td>Status</td>
<td>      </td>
</tr>
</thead>

<tbody>

</tbody>
</table>

Answer 2

let add=document.getElementById("add")
let submit=()=>{
let book=document.getElementById("Book").value
let author=document.getElementById("Author").value
let select=document.getElementById("Status").value
let values=[book,author,select]
let tr=document.createElement("tr")
for(let i of values){
let td=document.createElement("td")
td.textContent=i
tr.appendChild(td)
add.appendChild(tr)
}

}

<div>
<label for="Book">Book</label>
<input type="text" id="Book">
</div>
<div>
<label for="Author">Author</label>
<input type="text" id="Author">
</div>
<div>
<label for="status">Status</label>
<select name="status" id="Status">
<option value="Read">Read</option>
<option value="Not read">Not read</option>
</select>

</div>
<br>
<div> 
<button type="submit" class="submit-btn" onclick="submit()">Submit</button>
</div>
</form>
<table>
<thead>
<tr>
<td>Name</td>
<td>Author</td>
<td>Status</td>
<td>      </td>
</tr>
</thead>
<tbody id="add">
</tbody>
</table>

Answer 3

当<button>没有type属性时，或者<form>内有type="submit"的<button type="submit">或<input type="submit">，默认情况下，每当单击时，它都会提交<form>。因此，每次单击提交按钮时，整个页面都会变黑。

表单字段具有需要访问才能获取值的.value属性。见图一和图二

图一

<form id="catalog">
<input id="title" value="Catcher in the Rye">
<input id="author" value="J.D. Salinger">
<select id="status">
<option disabled>Did you read this book?</option>
<option value="1" selected>Read</option>
<option value="0">Not Read</option>
</select>
</form>

图二

// Reference <form>
const catalog = document.forms.catalog;
// Reference all form fields in <form>
const fields = catalog.elements;
// Reference individual fields by id or name
const title = fields.title;
const author = fields.author;
const status = fields.status;
// Get values
title.value  // "Catcher in the Rye"
author.value // "J.D. Salinger"
Boolean(status.value) /* Originally a "1", Boolean() converts it to true
If value is a "", Boolean() converts it to false */

重要说明：任何元素的所有值都将是字符串。如果您需要计算任何内容，请确保将字符串转换为数字。见图三

图三

Boolean1(

真)0(假)

String	Number
"0 "， '01' 和​​`​1`​	10<</pre>td style="文本对齐：居中;">