javascript - 如何遍历表行，更改类以及使用“n”个行数并了解每一行中FIRST单元格的值来完成所有操作

好，简单的问题，令人困惑的答案...

我有以下代码：

<tbody>
    {{#each alertRow}}
        <tr data-toggle="collapse" data-target="#data{{id}}" class="accordion-toggle">
            <td><i id="dataCbx{{id}}" style="text-align:center;" class="icon-check center pointerCursor" title="Click here to check/uncheck the box. Click on another part of the row to expand collapse without affecting the checkbox" onclick="changeIcon(this.id);"></i></td>
            <td>{{alertLevel}}</td>
            <td>{{alertType}}</td>
            <td>{{network}}</td>
            <td>{{site}}</td>
            <td>{{resource}}</td>
            <td>{{component}}</td>
            <td>{{details}}</td>
            <td>{{alertTime}}</td>
        </tr>
        <tr>
            <td colspan="10" class="hiddenRow">
                <div id="data{{id}}" class="accordian-body collapse innerTableCollapse">
                    <div style="float: left;">Server Name:{{network}}</div>
                    <div style="float: left;">Status:{{status}}</div>
                    <div style="float: left;">Issue Description:&nbsp;</div>
                    <div style="float: left;">Alert Details:&nbsp;</div>
                    <div style="float: left;">Resource Type:&nbsp;</div>
                </div>
            </td>
        </tr>
     {{/each}}
 </tbody>

注意，我使用的是HANDLEBARS.JS，但这不是问题。

所以这是我需要做的：


当PAGE呈现后，我需要能够遍历所有行（无论有多少行），并检查{{alertLevel}}的值...
如果ALERTLEVEL = 0，则为FIRST TD“ RED”设置背景色
如果ALERTLEVEL = 1，则为FIRST TD“ YELLOW”设置背景色
如果ALERTLEVEL = 2，则为FIRST TD“ GREEN”设置背景色


很简单，对吧？

然后，一旦有了该字段，就需要基于第一列的ALERT LEVEL，使整个行（减去第一列），对于ALERTLEVEL = 0的浅红色，对于ALERTLEVEL = 1的浅黄色和一个浅绿色为2的ALERTLEVEL。

你能帮我吗？请...谢谢。

最佳答案

我相信以下内容应该可以工作，但是您需要在表中添加id="alertTable"并进行更改：

<td>{{alertLevel}}</td>

至：

<td id="alertRow">{{alertLevel}}</td>

另外，我认为您可能需要将colspan 10更改为colspan 9，因为您的列似乎不匹配？

您需要包括的脚本为：

<script>
    $(function () {
        $("#alertTable tr").each(function () {

            var alertLevelElement = $("#alertLevel", this);

            switch (alertLevelElement.text())
            {
                case "1":
                    alertLevelElement.css("background-color", "red");
                    $(this).css("background-color", "indianred");
                    break;
                case "2":
                    alertLevelElement.css("background-color", "yellow");
                    $(this).css("background-color", "lightyellow");
                    break;
                case "3":
                    alertLevelElement.css("background-color", "green");
                    $(this).css("background-color", "lightgreen");
                    break;
                default:
                    console.error("Unrecognised alert level: " + alertLevelElement.text());
            }
        });
    });
</script>

可以对此进行某种程度的减少，但是为了便于阅读和理解，这应该足够了。