jquery删除添加表格数据库数据库数据库

admin 2026年03月02日 07:03 104 0

jQuery结合数据库操作，实现表格数据的动态添加与删除功能，通过jQuery选择器定位表格元素，监听用户操作事件（如按钮点击），动态修改DOM结构（新增行、删除指定行），并利用AJAX技术向后端数据库发送请求，同步数据变更，该方案既优化了前端交互体验，确保数据实时更新，又通过数据库持久化存储保障数据一致性，适用于需要频繁维护表格数据的场景。

jQuery结合数据库实现表格数据的动态添加与删除

在Web应用开发中，表格数据的动态管理是常见需求，例如用户管理系统、商品列表展示等场景，通过jQuery可以高效操作前端DOM元素，结合后端数据库接口，实现表格数据的实时添加与删除功能，无需刷新页面即可更新界面，本文将详细介绍如何使用jQuery配合后端数据库（以MySQL为例）完成这一功能,并提供完整的实现方案。

环境准备与技术栈

前端技术栈

HTML：构建表格基础结构
CSS：美化表格样式（可选）
jQuery：简化DOM操作与AJAX请求
Bootstrap：快速构建响应式UI界面（可选,本文用于样式美化）

后端技术栈

Node.js + Express：搭建后端服务器（也可使用PHP、Java等其他后端技术）
MySQL：存储表格数据
mysql2：Node.js连接MySQL的驱动包

数据库设计

创建一张简单的users表,用于存储用户信息：

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `age` int(11) NOT NULL,
  `email` varchar(100) DEFAULT NULL,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

前端表格设计与基础HTML

构建一个包含表格和添加/删除功能的HTML页面，使用Bootstrap快速美化界面,jQuery通过CDN引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery动态表格管理系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .fade-in {
      animation: fadeIn 0.5s;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      min-width: 250px;
    }
  </style>
</head>
<body>
  <div class="container mt-4">
    <h2 class="mb-3">用户信息表</h2>
    <!-- 添加用户表单 -->
    <div class="card mb-4">
      <div class="card-header bg-primary text-white">
        <h5 class="mb-0">添加新用户</h5>
      </div>
      <div class="card-body">
        <form id="addUserForm">
          <div class="row g-2">
            <div class="col-md-3">
              <input type="text" class="form-control" id="userName" placeholder="姓名" required>
            </div>
            <div class="col-md-3">
              <input type="number" class="form-control" id="userAge" placeholder="年龄" min="1" max="150" required>
            </div>
            <div class="col-md-4">
              <input type="email" class="form-control" id="userEmail" placeholder="邮箱">
            </div>
            <div class="col-md-2">
              <button type="submit" class="btn btn-primary w-100">
                <i class="bi bi-plus-circle"></i> 添加
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- 用户表格 -->
    <div class="card">
      <div class="card-header bg-secondary text-white">
        <h5 class="mb-0">用户列表</h5>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover table-striped mb-0">
            <thead class="table-dark">
              <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="userTableBody">
              <!-- 数据通过jQuery动态加载 -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <script>
    // jQuery代码将在下方实现
  </script>
</body>
</html>

后端接口设计

后端需提供三个核心接口：

获取用户列表（GET /api/users）：返回所有用户数据
添加用户（POST /api/users）：接收前端表单数据，存入数据库
删除用户（DELETE /api/users/:id）：根据ID删除指定用户

Express服务器搭建（Node.js）

// server.js
const express = require('express');
const mysql = require('mysql2/promise');
const cors = require('cors');
const app = express();
const port = 3000;
// 中间件配置
app.use(cors()); // 允许跨域请求
app.use(express.json()); // 解析JSON请求体
app.use(express.urlencoded({ extended: true })); // 解析URL编码的请求体
// 数据库连接池配置
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'your_password',
  database: 'test_db',
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});
// 测试数据库连接
pool.getConnection()
  .then(connection => {
    console.log('MySQL连接成功');
    connection.release();
  })
  .catch(err => {
    console.error('MySQL连接失败:', err);
  });
// 获取用户列表
app.get('/api/users', async (req, res) => {
  try {
    const [results] = await pool.query('SELECT * FROM users ORDER BY id DESC');
    res.json({
      success: true,
      data: results
    });
  } catch (error) {
    console.error('查询用户列表失败:', error);
    res.status(500).json({
      success: false,
      message: '查询用户列表失败',
      error: error.message
    });
  }
});
// 添加用户
app.post('/api/users', async (req, res) => {
  try {
    const { name, age, email } = req.body;
    // 基本数据验证
    if (!name || !age) {
      return res.status(400).json({
        success: false,
        message: '姓名和年龄为必填项'
      });
    }
    const [result] = await pool.query(
      'INSERT INTO users (name, age, email) VALUES (?, ?, ?)',
      [name, age, email]
    );
    res.json({
      success: true,
      message: '用户添加成功',
      data: {
        id: result.insertId,
        name,
        age,
        email
      }
    });
  } catch (error) {
    console.error('添加用户失败:', error);
    res.status(500).json({
      success: false,
      message: '添加用户失败',
      error: error.message
    });
  }
});
// 删除用户
app.delete('/api/users/:id', async (req, res) => {
  try {
    const userId = req.params.id;
    // 检查用户是否存在
    const [users] = await pool.query('SELECT id FROM users WHERE id = ?', [userId]);
    if (users.length === 0) {
      return res.status(404

标签： #删除添加 #表格数据库