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

Question

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

我有这个代码:

<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，但这不是问题所在。

所以这是我需要做的:

1. 当页面呈现时，我需要能够遍历所有行，无论有多少行，并检查 {{alertLevel}} 的值...
2. 如果 ALERTLEVEL = 0，则为第一个 TD 设置背景颜色为“RED”
3. 如果 ALERTLEVEL = 1 则为第一个 TD 设置背景颜色为“黄色”
4. 如果 ALERTLEVEL = 2，则为第一个 TD 设置背景颜色为“绿色”

够简单了吧？

然后，一旦我有了它，基于第一列的警报级别，我需要制作整个行(减去第一列)，ALERTLEVEL = 0 的浅红色，ALERTLEVEL = 1 的浅黄色和警报级别为 2 的浅绿色。

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

Answer 1

CSS 解决方案

为您的警报级别定义类别:

td.alertlevel0 {
    background-color: #e00;
}
tr.alertlevel0 {
    background-color: #f55;
}

在渲染时插入类

<tr class="alertlevel{{alertLevel}}">
    <td class="alertlevel{{alertLevel}}">{{alertLevel}}</td>
</tr>