如何用Node.js将MongoDB数据展示到HTML表格对应单元格中

基于你已经掌握的Mongoose数据查询和模板/HTML展示能力，以下是将MongoDB数据渲染到HTML表格的具体实现步骤：

1. 后端（Node.js + Mongoose）：传递查询数据到模板 #

通过Express路由查询MongoDB数据后，将数据数组传递给hbs模板：

const express = require('express');
const router = express.Router();
const YourModel = require('../models/YourModel'); // 导入你的Mongoose模型

router.get('/data-table', async (req, res) => {
  try {
    // 从MongoDB查询数据，可根据需求添加过滤条件（如find({status: 'active'})）
    const dataList = await YourModel.find({});
    // 将数据以`data`变量名传递给hbs模板
    res.render('data-table', { data: dataList });
  } catch (err) {
    console.error(err);
    res.status(500).send('数据获取失败');
  }
});

module.exports = router;

2. Handlebars模板渲染HTML表格 #

在hbs模板中，使用{{#each}}循环遍历数据数组，为每条数据生成表格行和对应单元格：

<!DOCTYPE html>
<html>
<head>
  <title>MongoDB数据表格</title>
  <style>
    table { border-collapse: collapse; width: 80%; margin: 20px auto; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
  </style>
</head>
<body>
  <h1>MongoDB数据展示</h1>
  <table>
    <!-- 表头：对应你的MongoDB文档字段 -->
    <thead>
      <tr>
        <th>文档ID</th>
        <th>用户名</th>
        <th>邮箱</th>
        <th>创建时间</th>
      </tr>
    </thead>
    <tbody>
      <!-- 遍历数据数组生成表格行 -->
      {{#each data}}
      <tr>
        <td>{{_id}}</td> <!-- MongoDB默认的唯一ID字段 -->
        <td>{{username}}</td> <!-- 替换为你的文档实际字段 -->
        <td>{{email}}</td> <!-- 替换为你的文档实际字段 -->
        <td>{{createdAt}}</td> <!-- 替换为你的文档实际字段 -->
      </tr>
      {{else}}
      <!-- 无数据时的提示行 -->
      <tr>
        <td colspan="4">暂无数据</td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</body>
</html>

注意：将username、email等字段替换为你的MongoDB文档实际字段名，colspan值要与表头列数保持一致。

3. 纯HTML + AJAX动态渲染（可选） #

如果需要不依赖模板引擎，直接通过前端JS动态生成表格，可采用以下方式：

后端接口（返回JSON数据） #

router.get('/api/data', async (req, res) => {
  try {
    const dataList = await YourModel.find({});
    res.json(dataList);
  } catch (err) {
    res.status(500).json({ error: '数据获取失败' });
  }
});

前端HTML动态生成表格 #

<!DOCTYPE html>
<html>
<head>
  <title>MongoDB数据表格</title>
  <style>
    table { border-collapse: collapse; width: 80%; margin: 20px auto; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
  </style>
</head>
<body>
  <h1>MongoDB数据展示</h1>
  <table id="dataTable">
    <thead>
      <tr>
        <th>文档ID</th>
        <th>用户名</th>
        <th>邮箱</th>
        <th>创建时间</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    // 发送AJAX请求获取数据
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        const tbody = document.querySelector('#dataTable tbody');
        if (data.length === 0) {
          tbody.innerHTML = '<tr><td colspan="4">暂无数据</td></tr>';
          return;
        }
        // 遍历数据生成表格行和单元格
        data.forEach(item => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${item._id}</td>
            <td>${item.username}</td>
            <td>${item.email}</td>
            <td>${new Date(item.createdAt).toLocaleString()}</td>
          `;
          tbody.appendChild(row);
        });
      })
      .catch(err => console.error('数据获取失败:', err));
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Subhadeep Roy