Have a look at the tempTable below, It mentions High Temperature, but it does not mention Low Temperature yet both are being updated while you view the page. It includes two fixed times(23:10 and 15:10) but you don't see those fixed times on the page in the interface. In other words, ignore the structure within the <table> and </table> tags, it is overwritten by the Javascript.
In the HTML file
Code: Select all
<table id="TempTable" style="width:100%">
<thead>
<tr>
<th> Temperature</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th> </th>
<th colspan="2">Today</th>
<th colspan="2">Yesterday</th>
</tr>
</thead>
<tr>
<td>High Temperature</td>
<td><span id="OutdoorTemp">--</span> <span class="TempUnit">--</span></td>
<td>23:10</td>
<td><span id="OutdoorTemp">--</span> <span class="TempUnit">--</span></td>
<td>15:10</td>
</tr>
<tr>
<td>Dew Point</td>
<td><span id="OutdoorDewpoint">--</span></td>
<td><span class="TempUnit">--</span></td>
</tr>
<tr>
<td>Wind Chill</td>
<td><span id="WindChill">--</span></td>
<td><span class="TempUnit">--</span></td>
</tr>
<tr>
<td>Apparent Temperature</td>
<td><span id="AppTemp">--</span></td>
<td><span class="TempUnit">--</span></td>
</tr>
<tr>
<td>Heat Index</td>
<td><span id="HeatIndex">--</span></td>
<td><span class="TempUnit">--</span></td>
</tr>
<tr>
<td>Humidex</td>
<td><span id="Humidex">--</span></td>
<td><span class="TempUnit">--</span></td>
</tr>
<tr>
<td>Indoor Temperature</td>
<td><span id="IndoorTemp">--</span></td>
<td><span class="TempUnit">--</span></td>
</tr>
</table>
Code: Select all
var tempTable = $('#TempTable').DataTable({
"paging": false,
"searching": false,
"info": false,
"ordering": false,
"ajax": '../api/todayyest/temp.json'
});