在pug中编辑表格的单元格，并将编辑的数据保存到数据库中

npm install express pug body-parser mongoose

// 导入所需的模块
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

// 创建Express应用
const app = express();

// 设置Pug作为模板引擎
app.set('view engine', 'pug');

// 使用Body Parser中间件解析请求体
app.use(bodyParser.urlencoded({ extended: true }));

// 连接到MongoDB数据库
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => {
    console.log('Connected to the database');
  })
  .catch((error) => {
    console.log('Error connecting to the database:', error);
  });

// 创建数据模型
const TableData = mongoose.model('TableData', {
  cellData: String
});

// GET路由：显示编辑表格的页面
app.get('/', (req, res) => {
  TableData.find()
    .then((data) => {
      res.render('index', { tableData: data });
    })
    .catch((error) => {
      res.render('error', { message: 'Error retrieving data from the database' });
    });
});

// POST路由：保存编辑的数据到数据库
app.post('/save', (req, res) => {
  const { id, cellData } = req.body;

  TableData.findByIdAndUpdate(id, { cellData })
    .then(() => {
      res.redirect('/');
    })
    .catch((error) => {
      res.render('error', { message: 'Error saving data to the database' });
    });
});

// 监听端口
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

html
  head
    title Editable Table
  body
    h1 Editable Table

    table
      thead
        tr
          th Cell Data
          th Actions
      tbody
        each data in tableData
          tr
            td.content(contenteditable='true') #{data.cellData}
            td
              form(action='/save', method='post')
                input(type='hidden', name='id', value=data._id)
                input(type='hidden', name='cellData', value='#{data.cellData}')
                input(type='submit', value='Save')

    script(src='https://code.jquery.com/jquery-3.6.0.min.js')
    script.
      $(document).ready(function() {
        $('td.content').on('input', function() {
          $(this).parent().find('input[name="cellData"]').val($(this).text());
        });
      });

node app.js