Highlight tables cells based on values in JSON with JQUERY

Question

I have a web page which displays a table of information from a JSON. Once search is done the table cells change background color to match certain values returned in the jason file.

See sample in JS Fiddle

My JSON and Jquery attempt

  var data = [{
    "id": "1",
        "slot": "01",
        "date": "20-01-2014",
        "status": "1",
        "code": "2"
}, {
    "id": "41",
        "slot": "05",
        "date": "20-01-2014",
        "status": "0",
        "code": "1"
}, {
    "id": "11",
        "slot": "04",
        "date": "20-01-2014",
        "status": "0",
        "code": "4"
}, {
    "id": "5",
        "slot": "03",
        "date": "20-01-2014",
        "status": "0",
        "code": "1"
}, {
    "id": "23",
        "slot": "02",
        "date": "20-01-2014",
        "status": "1",
        "code": "3"
}];
$("button").click(function () {
    var $results = $("#results"), // Get the TR.
        $tds = $("#results").find("td"), // Get the TDs within the TR.
        noRecord = "<td colspan=\"5\">No record to display!</td>";


    // 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 < 6; 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 st = parseInt(data[i].status,10);
            var sl = parseInt(data[i].slot,10);
            var cd = parseInt(data[i].code,10);

            // 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 < 6; i++) {
                    if (st === 0 && i === sl) {
                        html += "<td class=\"noerror\"></td>";
                    } else if (st === 1 && i === sl) {
                        html += "<td class=\"error\"></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

                for (i = 1; i < 6; i++) {
                    if (st !== 0) {
                        // Change class to "error"

                        $($tds[i])
                            .removeClass("noerror")
                            .addClass("error");

                    } else {
                        // Change class to "noerror" 

                        $($tds[i])
                            .removeClass("error")
                            .addClass("noerror");

                    }
                }
            }
        });
    }
});

The HTML table is like

<table border="1">
    <tr>
        <td>Slot/statu-error</td>
        <td>Slot1</td>
        <td>Slot2</td>
        <td>Slot3</td>
        <td>Slot4</td>
        <td>Slot5</td>
        <td>Details</td>
    </tr>
    <tr id="results">
        <td>First row</td>
        <td colspan="5">No record to display!</td>
        <td>
            <button>More+</button>
        </td>
    </tr>
</table>
<button>Update</button>
<p> <b>What I actually want on update</b><br />
    <i>The cell is green when stus is = 1, red otherwise <br />
        The cell is green when code = 1, red otherwise<br />
    Typically there will be more rows than shown for other parameters</i>
</p>
<table border="1">
    <tr>
        <td>Slot/statu-error</td>
        <td>Slot1</td>
        <td>Slot2</td>
        <td>Slot3</td>
        <td>Slot4</td>
        <td>Slot5</td>
        <td>Details</td>
    </tr>
    <tr id="results">
        <td>Status</td>
        <td class="noerror"></td>
        <td class="error"></td>
        <td class="error"></td>
        <td class="error"></td>
        <td class="noerror"></td>
        <td>
            <button>More+</button>
        </td>
    </tr>
    <tr>
        <td>Code</td>
        <td class="error"></td>
        <td class="noerror"></td>
        <td class="error"></td>
        <td class="noerror"></td>
        <td class="error"></td>
        <td>
            <button>More+</button>
        </td>
    </tr>
    </tr>
</table>
<button>Update</button>

Answer 1

I'm not sure if this is exactly what you're looking for, but let me explain - FIDDLE.

So the code goes through the array as the primary source, parses the array, then distributes the green/red to the appropriate td (not in the order of the array).

JS

$("button").on('click', function (index) {

    $.each( data, function(index){
        var slotbox = data[index]['slot'];
        slotbox = +slotbox + 1;
        var statusbox = data[index]['status'];
        var codebox = data[index]['code'];
        if( +statusbox == 1 )
        {
          $('tr#status td:nth-child('+ slotbox +')' ).css('background-color', 'green');
         } else {
          $('tr#status td:nth-child('+ slotbox +')' ).css('background-color', 'red');
         }
        if( +codebox == 1 )
        {
          $('tr#code td:nth-child('+ slotbox +')' ).css('background-color', 'green');
         } else {
          $('tr#code td:nth-child('+ slotbox +')' ).css('background-color', 'red');
         }
                                   });//end each
                                          });//end click