如何遍历表行，更改类，并使用“n”行执行所有操作并了解每行中FIRST单元格的值

Question

OK, easy question, confusing answer...

I have this code:

<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>

Notice, I'm using HANDLEBARS.JS but that's not the problem.

So here's what I need to do:

1. When the PAGE is RENDERED, I need to be able to LOOP through all the rows, no matter how many, and check the value of {{alertLevel}}...
2. If the ALERTLEVEL = 0 then make background-color for the FIRST TD "RED"
3. If the ALERTLEVEL = 1 then make background-color for the FIRST TD "YELLOW"
4. If the ALERTLEVEL = 2 then make background-color for the FIRST TD "GREEN"

Simply enough, right?

Then, once I have that, based on the ALERT LEVEL of the FIRST COLUMN, I need to make the ENTIRE ROW (minus the first column), a LIGHT RED for ALERTLEVEL = 0, a LIGHT YELLOW for ALERTLEVEL = 1 and a LIGHT GREEN for ALERTLEVEL of 2.

Can you assist me?? Please.... thanks.

Answer 1

CSS solution

Define classes for your alert levels:

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

Insert classes as you render

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

Answer 2

I believe the following should work but you would need to add id="alertTable" to your table and change:

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

to:

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

Additionally, I believe you would need to change your colspan 10 to colspan 9 as it seems your columns don't match up?

The script you would need to include would be:

<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>

It would be possible to reduce this somewhat but for readability and understanding this should be sufficient.