如何在HTML JavaScript页面中将记录格式化为指定表格形式？

我不是开发人员，但因项目需求需搭建应用，恳请谅解我的知识盲区，我愿意学习。当前我的HTML页面中传感器数据以并排拼接的形式显示，希望改为指定的表格形式展示。

当前JavaScript代码：

get(child(dbref, "Sensor"))
.then((snapshot)=>{
    snapshot.forEach((child)=>{
    let table = document.querySelector('table');
    let template = `
        <tr>
           <td>${child.val().StartTime}</td>
           <td>${child.val().Duration}</td>
           <td>${child.val().GalsPumped}</td>
           <td>${child.val().Cycle}</td>
        </tr>`;
        table.innerHTML += template;
        id_PumpID.innerHTML += "Pump ID: " + child.val().PumpID
        id_StartTime.innerHTML += "StartTime: " + child.val().StartTime;
        id_Cycle.innerHTML += "Cycle: " + child.val().Cycle;
        id_Duration.innerHTML += "Duration: " +  child.val().Duration;
        id_GalsPumped.innerHTML += "GalsPumped: " + child.val().GalsPumped;
     })
    });

当前HTML表格结构：

<table style="border-collapse: collapse; width: 100%; height: 72px;" border="1">
    <tbody>
        <tr style="height: 18px;">
            <td style="width: 14.5616%; height: 18px;">&nbsp;</td>
            <td style="width: 47.9645%; height: 18px;"><strong>START-TIME</strong></td>
            <td style="width: 19.1545%; height: 18px;"><strong>DURATION-HRS</strong></td>
            <td style="width: 18.3194%; height: 18px;"><strong>GALS-PUMPED</strong></td>
            <td style="width: 18.3194%; height: 18px;"><strong>CYCLE</strong></td>
        </tr>

        <tr style="height: 18px;">
            <td style="width: 14.5616%; height: 18px;"><span style="color: #0000ff;"><strong>PUMP1</strong></span></td>
            <td style="width: 47.9645%; height: 18px;">&nbsp;</td>
            <td style="width: 19.1545%; height: 18px;">&nbsp;</td>
            <td style="width: 18.3194%; height: 18px;">&nbsp;</td>
            <td style="width: 18.3194%; height: 18px;">&nbsp;</td>
        </tr>

        <tr style="height: 18px;">
            <td style="width: 14.5616%; height: 18px;"><span style="color: #00ff00;"><strong>PUMP2</strong></span></td>
            <td style="width: 47.9645%; height: 18px;">&nbsp;</td>
            <td style="width: 19.1545%; height: 18px;">&nbsp;</td>
            <td style="width: 18.3194%; height: 18px;">&nbsp;</td>
            <td style="width: 18.3194%; height: 18px;">&nbsp;</td>
        </tr>

        <tr style="height: 18px;">
            <td style="width: 14.5616%; height: 18px;"><span style="color: #ff0000;"><strong>PUMP3</strong></span></td>
            <td style="width: 47.9645%; height: 18px;">&nbsp;</td>
            <td style="width: 19.1545%; height: 18px;">&nbsp;</td>
            <td style="width: 18.3194%; height: 18px;">&nbsp;</td>
            <td style="width: 18.3194%; height: 18px;">&nbsp;</td>
        </tr>

    </tbody>
</table>

当前页面显示效果：

Cycle: 218Cycle: 10
Duration: 0.01222Duration: 0.99278
GalsPumped: 73.33333GalsPumped: 5956.6665
Pump ID: 1Pump ID: 2
StartTime: 10:09:2022 13:13:31StartTime: 10:09:2022 15:43:17

期望显示格式：

Pump   StartTime             Cycle   GalsPumped   Duration

1      10:09:2022 13:13:31   218     73.33333     0.01

2      10:09:2022 15:43:17    10     5956.665     0.99278

步骤1：调整HTML表格结构 #

删掉预设的PUMP1/PUMP2固定行，改成匹配期望格式的表头结构，并给tbody添加ID方便JS定位：

<table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
        <tr>
            <th style="width: 10%;"><strong>Pump</strong></th>
            <th style="width: 35%;"><strong>StartTime</strong></th>
            <th style="width: 15%;"><strong>Cycle</strong></th>
            <th style="width: 20%;"><strong>GalsPumped</strong></th>
            <th style="width: 20%;"><strong>Duration</strong></th>
        </tr>
    </thead>
    <tbody id="sensorTableBody">
        <!-- 数据行将通过JS动态插入 -->
    </tbody>
</table>

步骤2：修改JavaScript代码 #

移除导致数据拼接混乱的独立元素操作，专注往表格里插入正确顺序的行：

get(child(dbref, "Sensor"))
.then((snapshot)=>{
    const tableBody = document.getElementById('sensorTableBody');
    // 清空tbody，避免重复加载时数据叠加
    tableBody.innerHTML = '';
    
    snapshot.forEach((child)=>{
        const pumpData = child.val();
        // 按期望的列顺序生成表格行
        const rowTemplate = `
            <tr>
                <td>${pumpData.PumpID}</td>
                <td>${pumpData.StartTime}</td>
                <td>${pumpData.Cycle}</td>
                <td>${pumpData.GalsPumped}</td>
                <td>${parseFloat(pumpData.Duration).toFixed(4)}</td>
            </tr>`;
        tableBody.innerHTML += rowTemplate;
    })
});

说明：

• 删除了对id_PumpID等独立元素的操作，这些是造成数据并排拼接的原因
• 调整列顺序和期望格式完全匹配
• 用toFixed(4)把Duration格式化为4位小数，和示例效果一致（不需要可以去掉）

步骤3：（可选）优化显示样式 #

添加CSS让表格数据对齐更整齐：

table {
    font-family: monospace; /* 等宽字体让数据对齐更直观 */
}
th, td {
    padding: 8px;
    text-align: left;
}

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