Javascript 使用JQUERY根据JSON中的值高亮显示表格单元格

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

请参见

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

                    }
                }
            }
        });
    }
});

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

                    }
                }
            }
        });
    }
});

var数据=[{
“id”：“1”，
“插槽”：“01”，
“日期”：“2014年1月20日”，
“状态”：“1”，
“代码”：“2”
}, {
“id”：“41”，
“插槽”：“05”，
“日期”：“2014年1月20日”，
“状态”：“0”，
“代码”：“1”
}, {
“id”：“11”，
“插槽”：“04”，
“日期”：“2014年1月20日”，
“状态”：“0”，
“代码”：“4”
}, {
“id”：“5”，
“插槽”：“03”，
“日期”：“2014年1月20日”，
“状态”：“0”，
“代码”：“1”
}, {
“id”：“23”，
“插槽”：“02”，
“日期”：“2014年1月20日”，
“状态”：“1”，
“代码”：“3”
}];
$（“按钮”）。单击（函数（）{
var$results=$（“#results”），//获取TR。
$tds=$（“#results”）.find（“td”），//获取TR中的tds。
noRecord=“没有要显示的记录！”；
//检查是否返回了数据。
如果（数据===未定义）{
//没有返回数据。
if（$results.html（）.indexOf（noRecord）=-1）{
//结果TR具有需要删除的以前的值。
对于（i=1；i<6；i++）
$（$tds[i]）.remove（）；
//添加回[No record to display！]TD。
$（noRecord）.insertAfter（$tds[0]）；
}
}否则{
//返回了数据。
$。每个（数据、功能（i）{
//存储当前数据。
var st=parseInt（数据[i]。状态，10）；
var sl=parseInt（数据[i]。插槽，10）；
var cd=parseInt（数据[i]。代码，10）；
//检查结果TR是否具有以前的值。
if（$results.html（）.indexOf（noRecord）>-1）{
//结果TR没有以前的值。
var html=“”；
//生成新的TDs。
对于（i=1；i<6；i++）{
如果（st==0&&i==sl）{
html+=“”；
}else if（st==1&&i==sl）{
html+=“”；
}
}
//删除[No record to display！]TD并替换为新的TDs。
$（$tds[1]）。替换为（html）；
}否则{
//结果TR有以前的值，所以我们需要循环
//通过替换其类别的每个现有TD
对于（i=1；i<6；i++）{
如果（st！==0）{
//将类更改为“错误”
$（$tds[i]）
.removeClass（“无错误”）
.addClass（“错误”）；
}否则{
//将类更改为“无错误”
$（$tds[i]）
.removeClass（“错误”）
.addClass（“无错误”）；
}
}
}
});
}
});

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>

时隙/高度误差
Slot1
慢2
慢3
Slot4
Slot5
细节
第一排
没有要显示的记录！
更多+
更新
更新时我真正想要的

当stus=1时，单元格为绿色，否则为红色

当代码=1时，单元格为绿色，否则为红色

通常会有比其他参数显示的更多的行

时隙/高度误差
Slot1
慢2
慢3
Slot4
Slot5
细节
地位
更多+
代码
更多+
更新

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

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

JS

---

你的问题到底是什么？您可能需要澄清您期望的行为。我查看了您的小提琴，但它有语法错误，无法运行。我在第34行看到一个缺少的分号，第58-60行应该是data[I]而不是data[I]之后，我开始抱怨没有定义noRecord——我不确定它是在哪里声明的，或者它到底应该表示什么。我添加了缺少的变量。并更正了数据mistake@DrydenLong如果您想通过Jquery从第一个表开始动态异步地实现seond表，那么感谢您的教程响应。感谢您的响应和见解。我还有一个问题。如果我有一个以上的数据槽，就像在Hmmm中一样……这对你们来说更像是一个哲学问题。哪个数据点变得更重要？如果你用手画出来，你会如何选择？