javascript - 使用 JQUERY 根据 JSON 中的值突出显示表格单元格

Question

我有一个网页显示来自 JSON 的信息表。搜索完成后，表格单元格会更改背景颜色以匹配 jason 文件中返回的某些值。

参见中的示例JS Fiddle

我的 JSON 和 Jquery 尝试

  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");

                    }
                }
            }
        });
    }
});

HTML 表格就像

<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

我不确定这是否正是您要找的，但让我解释一下 - FIDDLE .

因此代码遍历作为主要来源的数组，解析数组，然后将绿色/红色分配给适当的 td(不按照数组的顺序)。

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