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>

What is your question exactly? You may need to clarify what behaviour you are expecting. — Dryden Long
– Dryden Long, Commented Mar 17, 2014 at 21:12
I looked at your fiddle, but it has syntax errors preventing it from running. I saw a missing semi-colon on line 34, and lines 58-60 should be data[i] instead of data.[i] After that is started to complain about noRecord not being defined - I'm not sure where that was declared or what exactly it's supposed to represent. — Danny
– Danny, Commented Mar 17, 2014 at 21:33
I have added the missing variable. and corrected the data.[i] mistake — sunny_side_of_life
– sunny_side_of_life, Commented Mar 17, 2014 at 21:51
@DrydenLong Thanks for tour response if you look at the JSFiddle I want to achieve the seond table from the first dynamically and asynchronously with Jquery. — sunny_side_of_life
– sunny_side_of_life, Commented Mar 17, 2014 at 22:08

TimSPQR · Accepted Answer · 2014-03-18 04:07:40Z

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

answered Mar 18, 2014 at 4:07

TimSPQR

3,0043 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sunny_side_of_life Over a year ago

Thanks for your response and insight. I still have a prob. What if I have more that one data same slot as in this fiddle

TimSPQR Over a year ago

Hmmm...that is more of a philosophical question for you. Which data point becomes more important? If you were to draw it out by hand, how would you make the selection?

Collectives™ on Stack Overflow

Highlight tables cells based on values in JSON with JQUERY

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related