正文

轻松掌握：JavaScript轻松操作数据库，轻松为表格添加新行教程

/0 浏览量
0626

在网页开发中，我们经常需要与数据库进行交互，以便动态地显示和更新数据。JavaScript 提供了多种方法来与数据库进行通信，其中一种简单有效的方式是通过使用 AJAX（Asynchronous JavaScript and XML）技术。以下是一篇详细的教程，将指导你如何使用 JavaScript 轻松操作数据库，并为表格添加新行。

准备工作

在开始之前，请确保你已经：

  1. 安装了 Node.js 和 npm：Node.js 是一个让 JavaScript 运行在服务器端的平台，而 npm 是 Node.js 的包管理器。
  2. 选择了数据库：这里我们将使用 SQLite，因为它轻量级、易于使用，并且不需要额外的服务器。
  3. 创建了一个 HTML 页面：这个页面将包含一个表格和一个用于添加新行的表单。

步骤 1：设置 SQLite 数据库

首先，我们需要创建一个 SQLite 数据库和一个表格。以下是使用 Node.js 和 SQLite3 模块创建数据库和表格的示例代码：

const sqlite3 = require('sqlite3').verbose();

const db = new sqlite3.Database(':memory:');

db.serialize(() => {
  db.run(`CREATE TABLE items (
    id INTEGER PRIMARY KEY,
    name TEXT,
    quantity INTEGER
  )`);
});

db.close();

步骤 2：创建 HTML 页面

创建一个简单的 HTML 页面，其中包含一个表格和一个表单，用于添加新行：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加新行到表格</title>
</head>
<body>
  <table id="itemsTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格行将被 JavaScript 动态添加 -->
    </tbody>
  </table>

  <form id="addItemForm">
    <input type="text" id="itemName" placeholder="Item Name" required>
    <input type="number" id="itemQuantity" placeholder="Quantity" required>
    <button type="submit">Add Item</button>
  </form>

  <script src="app.js"></script>
</body>
</html>

步骤 3：编写 JavaScript 代码

创建一个名为 app.js 的文件，并编写以下 JavaScript 代码：

document.getElementById('addItemForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const itemName = document.getElementById('itemName').value;
  const itemQuantity = document.getElementById('itemQuantity').value;

  const db = new sqlite3.Database(':memory:');

  db.serialize(() => {
    db.run(`INSERT INTO items (name, quantity) VALUES (?, ?)`, [itemName, itemQuantity], function(err) {
      if (err) {
        console.error(err.message);
        return;
      }
      console.log('A row has been inserted with rowid ${this.lastID}');
    });
  });

  db.all(`SELECT id, name, quantity FROM items`, [], (err, rows) => {
    if (err) {
      throw err;
    }
    const tableBody = document.getElementById('itemsTable').getElementsByTagName('tbody')[0];
    tableBody.innerHTML = ''; // 清空表格

    rows.forEach((row) => {
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>${row.id}</td><td>${row.name}</td><td>${row.quantity}</td>`;
      tableBody.appendChild(tr);
    });
  });

  db.close();
});

步骤 4：测试你的应用

  1. 将 app.js 文件和 HTML 文件放在同一目录下。
  2. 打开 HTML 文件，你应该能看到一个表格和一个表单。
  3. 输入一些数据并提交表单，你应该能够在表格中看到新添加的行。

通过以上步骤，你已经学会了如何使用 JavaScript 轻松操作数据库并为表格添加新行。这种方法不仅适用于 SQLite，还可以扩展到其他数据库和更复杂的应用场景。希望这篇教程对你有所帮助！

-- 展开阅读全文 --