如何将表单值追加到对象数组并同步展示到表格

我正在开发一个简易图书管理应用，需要把表单提交的字段内容嵌入表格里。目前已经实现了addBookToTable函数，手动往myLibrary数组添加对象时能正常展示到表格，但现在要实现点击提交按钮时，把表单里的文本字段值存入对象数组，通过该函数自动在表格展示。

解决方法 #

关键修改点 #

1. 阻止表单默认刷新行为：表单提交默认会刷新页面，必须先阻止这个行为才能完成前端逻辑
2. 优化表格渲染逻辑：原addBookToTable会重复渲染所有图书，需先清空表格再重新渲染
3. 绑定表单提交事件：获取表单输入值，创建图书实例并加入数组，最后更新表格

修改后的完整代码 #

JavaScript 代码

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 addBookToTable() {
  let tbody = document.querySelector('tbody')
  tbody.innerHTML = ''
  
  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 class="btn rdbtn">Read</button></td>'
    } else {
      content += '<td><button 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);
  // 同步删除数组中的对应图书，避免刷新后恢复
  const bookName = p.querySelector('td:first-child').textContent;
  myLibrary = myLibrary.filter(book => book.name !== bookName);
}

// 表单提交处理函数
function handleFormSubmit(e) {
  e.preventDefault();
  
  // 获取表单输入值
  const bookName = document.getElementById('Book').value.trim();
  const authorName = document.getElementById('Author').value.trim();
  const status = document.getElementById('Status').value;
  
  // 验证必填字段
  if (!bookName || !authorName) {
    alert('请填写书名和作者');
    return;
  }
  
  // 创建新图书实例并加入数组
  const newBook = new Book(bookName, authorName, status);
  addBookToLibrary(newBook);
  
  // 更新表格展示
  addBookToTable();
  
  // 清空表单
  document.querySelector('form').reset();
}

// 绑定表单提交事件
document.querySelector('form').addEventListener('submit', handleFormSubmit);

HTML 代码

<form>
  <div>
    <label for="Book">Book</label>
    <input type="text" id="Book" required>
  </div>
  <div>
    <label for="Author">Author</label>
    <input type="text" id="Author" required>
  </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">Submit</button>
  </div>
</form>
<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Author</td>
      <td>Status</td>
      <td> </td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Master1