JSFiddle - React, Tailwind, and code Playground
HTML
<table border="1">
<tr>
<td>first row/measures</td>
<td>measure1</td>
<td>measure2</td>
<td>measure3</td>
<td>measure4</td>
<td>measure5</td>
</tr>
<tr id="results">
<td>First row</td>
<td colspan="4">No record to display!</td>
<td>More+</td>
</tr>
</table>
<button>Update</button>
CSS
.new
{
background-color: blue;
color: white;
}
.rr
{
background-color: red;
color: white;
}
JavaScript
var noRecord = "<td colspan=\"4\">No record to display!</td>",
currentTime = 0;
$( "button" ).click( function ()
{
var $results = $( "#results" ), // Get the TR.
$tds = $( "#results" ).find( "td" ), // Get the TDs within the TR.
data = simulateData(); // Simulate data.
// Check to see if data was returned.
if ( data === undefined )
{
// Data was not returned.
if ( $results.html().indexOf( noRecord ) === -1 )
{
// Results TR has previous values that need to be removed.
for ( i = 1; i < 5; i++ )
$( $tds[i] ).remove();
// Add back the [No record to display!] TD.
$( noRecord ).insertAfter( $tds[0] );
}
}
else
{
// Data was returned.
$.each( data, function ( i )
{
// Store the current data.
var tm = parseInt( data.time );
// Check to see if the Results TR has previous values or not.
if ( $results.html().indexOf( noRecord ) > -1 )
{
// Results TR does not have previous values.
var html = "";
// Generate new TDs.
for ( i = 1; i < 5; i++ )
html += "<td class=\"new\">" + tm + "</td>";
// Remove [No record to display!] TD and replace with new TDs.
$( $tds[1] ).replaceWith( html );
}
else
{
// Results TR has previous values so we need to loop
// through each existing TD replacing its class and value.
for ( i = 1; i < 5; i++ )
{
if ( i != tm )
{
...