• Serif
  • Sans

歡迎來到 JavaScript 軟體實戰班！

新增學生資料

還記得第五課，我們是如何插入新資料的嗎？

var newStudent = {
    name: "Koding",
    grade: 3
};
studentCollection.insert(newStudent);

如何讓使用者新增資料？

我們來想像一下這個流程：

  1. 使用者能輸入學生的「姓名」、「年級」、「班級」、「電話」
  2. 按下「新增」按鈕後，會將以上資料變成一筆學生資料，放到學生資料表裡
  3. 表格要被更新，顯示出新的一筆資料

我們要如何讓使用者很輕鬆地做到？而不用想我們之前一樣在 console 中打一堆程式碼。

設計表單

使用者輸入資料的表單，會長什麼樣子呢？

功能實作

寫程式完成以下功能：

  • 使用者在輸入學生資料並按下 “新增” 按鈕後，將表單中的學生資料插進資料表。
  • 儲存成功後，刷新學生資料表，讓使用者能看到新的資料出現在表格中。