如何用jQuery实现：初始禁用保存按钮，rankingtable满5条后启用并入库

一、前端实现（HTML + 原生JavaScript） #

1. 页面基础结构 #

先搭建两个表格和保存按钮的DOM结构，源表格facilitytable带克隆操作按钮，目标表格rankingtable初始为空，保存按钮默认禁用：

<!-- 源设施表格 -->
<table id="facilitytable" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>设施名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里是后端渲染或静态填充的初始数据 -->
    <tr><td>1</td><td>会议室A</td><td><button class="clone-btn">克隆到排行榜</button></td></tr>
    <tr><td>2</td><td>健身区</td><td><button class="clone-btn">克隆到排行榜</button></td></tr>
    <tr><td>3</td><td>茶水间</td><td><button class="clone-btn">克隆到排行榜</button></td></tr>
    <tr><td>4</td><td>休息室</td><td><button class="clone-btn">克隆到排行榜</button></td></tr>
    <tr><td>5</td><td>打印区</td><td><button class="clone-btn">克隆到排行榜</button></td></tr>
    <tr><td>6</td><td>储物间</td><td><button class="clone-btn">克隆到排行榜</button></td></tr>
  </tbody>
</table>

<!-- 目标排行榜表格 -->
<table id="rankingtable" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>设施名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<!-- 保存按钮 -->
<button id="save-btn" disabled>保存到数据库</button>

2. 核心交互逻辑 #

实现克隆数据、移除数据、按钮状态控制和提交功能：

// 获取DOM元素
const facilityTable = document.getElementById('facilitytable');
const rankingTbody = document.getElementById('rankingtable').querySelector('tbody');
const saveBtn = document.getElementById('save-btn');
const cloneBtns = document.querySelectorAll('.clone-btn');

// 绑定克隆按钮点击事件
cloneBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前行的ID和设施名称
    const row = this.closest('tr');
    const id = row.cells[0].textContent;
    const name = row.cells[1].textContent;

    // 创建新行并插入目标表格
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
      <td>${id}</td>
      <td>${name}</td>
      <td><button class="remove-btn">移除</button></td>
    `;
    rankingTbody.appendChild(newRow);

    // 给移除按钮绑定事件
    newRow.querySelector('.remove-btn').addEventListener('click', function() {
      this.closest('tr').remove();
      checkRowCount(); // 移除后重新检查行数
    });

    // 检查当前行数，更新按钮状态
    checkRowCount();
  });
});

// 检查目标表格行数，控制保存按钮状态
function checkRowCount() {
  const rowNum = rankingTbody.querySelectorAll('tr').length;
  saveBtn.disabled = rowNum !== 5; // 只有刚好5条时启用按钮
}

// 保存数据到数据库的请求逻辑
saveBtn.addEventListener('click', async function() {
  // 收集目标表格中的数据
  const rows = rankingTbody.querySelectorAll('tr');
  const rankingData = Array.from(rows).map(row => ({
    id: row.cells[0].textContent,
    facilityName: row.cells[1].textContent
  }));

  try {
    // 发送POST请求到后端接口
    const resp = await fetch('/api/save-ranking', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(rankingData)
    });

    if (resp.ok) {
      alert('数据保存成功');
      // 可选：保存后清空表格并重置按钮状态
      rankingTbody.innerHTML = '';
      checkRowCount();
    } else {
      alert('保存失败，请重试');
    }
  } catch (err) {
    console.error('请求错误:', err);
    alert('网络异常，无法保存');
  }
});

二、后端实现（Node.js + Express + MySQL） #

1. 数据库表结构假设 #

假设rankingtable的结构和源表facilitytable匹配：

CREATE TABLE rankingtable (
  id INT PRIMARY KEY,
  facility_name VARCHAR(255) NOT NULL
);

2. 后端接口实现 #

接收前端提交的数据，验证数量后批量插入数据库：

const express = require('express');
const mysql = require('mysql2/promise');
const app = express();

// 解析JSON请求体
app.use(express.json());

// 数据库连接配置
const dbConfig = {
  host: 'localhost',
  user: '你的数据库用户名',
  password: '你的数据库密码',
  database: '你的数据库名'
};

// 保存排行榜数据的接口
app.post('/api/save-ranking', async (req, res) => {
  const rankingData = req.body;

  // 先验证数据数量是否为5条
  if (rankingData.length !== 5) {
    return res.status(400).json({ msg: '必须提交5条数据' });
  }

  let conn;
  try {
    conn = await mysql.createConnection(dbConfig);

    // 可选：清空现有数据（如果需要覆盖式保存）
    await conn.execute('TRUNCATE TABLE rankingtable');

    // 批量插入数据
    const insertSql = 'INSERT INTO rankingtable (id, facility_name) VALUES ?';
    const values = rankingData.map(item => [item.id, item.facilityName]);
    await conn.execute(insertSql, [values]);

    res.status(200).json({ msg: '数据保存成功' });
  } catch (err) {
    console.error('数据库操作错误:', err);
    res.status(500).json({ msg: '数据库保存失败' });
  } finally {
    if (conn) await conn.end();
  }
});

app.listen(3000, () => console.log('服务器运行在端口3000'));

三、关键逻辑说明 #

• 数据克隆与调整：通过DOM操作实现行数据的复制和移除，用户可以灵活调整目标表格的内容。
• 按钮状态控制：每次增删数据后调用checkRowCount函数，精准控制保存按钮的禁用/启用状态，确保只有5条数据时可提交。
• 前后端双重验证：前端控制按钮可用性，后端再次校验数据数量，避免非法请求。
• 高效数据库操作：使用批量插入减少数据库交互次数，提升性能；可选清空现有数据实现覆盖式保存，根据业务需求调整。

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