如何循环遍历表行，更改类，并使用"n〃;行数，并知道每行中第一个单元格的值

How to loop through table rows, change class, and do it all with "n" number of rows and knowing the values of the FIRST cell in each row

本文关键字：行数 单元格 第一个 quot 循环 何循环 遍历      更新时间：2024-01-20

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

我有这个代码：

<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. 当页面被RENDERED时，我需要能够循环浏览所有行，无论有多少行，并检查｛｛alertLevel｝｝的值
  2. 如果ALERTLEVEL=0，则将第一个TD的背景色设为"红色"
  3. 如果ALERTLEVEL=1，则将第一个TD的背景色设为"黄色"
  4. 如果ALERTLEVEL=2，则将第一个TD的背景色设为"绿色"

很简单，对吧？

然后，一旦我有了它，基于第一列的ALERTLEVEL，我需要使整行（减去第一列）变为浅红色表示ALERTLEVEL=0，变为浅黄色表示ALERTLEVEL=1，变为淡绿色表示ALERTLEVEL 2。

你能帮我吗？？请谢谢

CSS解决方案

为您的警报级别定义类：

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

在呈现时插入类

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

我认为以下内容应该有效，但您需要将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>

可以在一定程度上减少这种情况，但为了可读性和理解性，这应该足够了。

相关文章：