如何将Express服务端数据渲染到HTML表格并实现自动新增行

res.render 每次调用都会生成完整的HTML页面返回给客户端，无法做到多次调用累加表格行，你需要一次性把所有要展示的数据传递给模板，用模板循环语法生成所有表格行即可，实现步骤如下：

调整数据存储格式，将所有查询到的条目整理为对象数组后传递给模板：

app.get('/index', (req, res) => {
    const dataList = []
    const cursor = dbo.collection('collection').find()
    cursor.forEach(function (doc, err) {
        if (err) throw err;
        // 每个文档对应一行表格的数据，存为对象
        dataList.push({
            description: doc.name,
            adress: doc.adress
        })
    }, function () {
        // 将整个数据数组传递给模板
        res.render('index', { dataList })
    })
})

删除原本写死的单行表格代码，使用模板引擎的循环语法遍历dataList数组，有多少条数据就自动生成多少行表格。不同模板引擎的循环语法略有区别，常用场景示例如下：

• 如果你使用的是EJS模板：

<table>
    <tr>
        <th>Description</th>
        <th>Adress</th>
    </tr>
    <% dataList.forEach(item => { %>
    <tr>
        <td><%= item.description %></td>
        <td><%= item.adress %></td>
    </tr>
    <% }) %>
</table>

• 如果你使用的是Nunjucks/Mustache类原生支持{{}}标记的模板：

<table>
    <tr>
        <th>Description</th>
        <th>Adress</th>
    </tr>
    {% for item in dataList %}
    <tr>
        <td>{{item.description}}</td>
        <td>{{item.adress}}</td>
    </tr>
    {% endfor %}
</table>

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