I need help in arrnaging the output . Its being displayed side by side but I want it in tabular form as shown below. can you please guide me on how to do this ? I am not a developer but have to build this app for my project so bare with my ignorance plz, I am willing to learn.
The part of code generating this data is as follows :
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;
})
});
table structure
<table style="border-collapse: collapse; width: 100%; height: 72px;" border="1">
<tbody>
<tr style="height: 18px;">
<td style="width: 14.5616%; height: 18px;"> </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;"> </td>
<td style="width: 19.1545%; height: 18px;"> </td>
<td style="width: 18.3194%; height: 18px;"> </td>
<td style="width: 18.3194%; height: 18px;"> </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;"> </td>
<td style="width: 19.1545%; height: 18px;"> </td>
<td style="width: 18.3194%; height: 18px;"> </td>
<td style="width: 18.3194%; height: 18px;"> </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;"> </td>
<td style="width: 19.1545%; height: 18px;"> </td>
<td style="width: 18.3194%; height: 18px;"> </td>
<td style="width: 18.3194%; height: 18px;"> </td>
</tr>
</tbody>
</table>
The page is currently looking like this
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
I want the following format to be displayed
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