Как циклически проходить по строкам таблицы, изменять класс и делать все это с количеством строк «n» и знанием значений ПЕРВОЙ ячейки в каждой строке

Question

Как циклически проходить по строкам таблицы, изменять класс и делать все это с количеством строк «n» и знанием значений ПЕРВОЙ ячейки в каждой строке

0

Хорошо, простой вопрос, путаный ответ...

У меня есть этот код:

<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, но это не проблема.

Итак, вот что мне нужно сделать:

Когда СТРАНИЦА ОЖИДАЕТСЯ, мне нужно, чтобы LOOP через все строки, независимо от того, сколько их, и проверьте значение {{alertLevel}}...
Если ALERTLEVEL = 0, то сделайте фоновый цвет для FIRST TD "RED"
Если ALERTLEVEL = 1, то сделайте фоновый цвет для FIRST TD "ЖЕЛТЫЙ"
Если ALERTLEVEL = 2, то сделайте фоновый цвет для FIRST TD "GREEN"

Просто достаточно, не так ли?

Затем, как только у меня будет это, на основании уровня ALERT LEVEL первой коллима, мне нужно сделать ENTRE ROW (минус первый столбец), LIGHT RED для ALERTLEVEL = 0, LIGHT YELLOW для ALERTLEVEL = 1 и LIGHT GREEN для ALERTLEVEL 2.

Можете ли вы мне помочь? Пожалуйста спасибо.

Peter The Angular Dude 02 дек. 2013, в 20:28

Источник

Теги:

javascript

jquery

css

2 ответа

2

Решение CSS

Определите классы для уровней предупреждений:

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

Вставляйте классы при рендеринге

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

Jasen 02 дек. 2013, в 17:48

0

@Peter Определенно лучший и быстрый способ сделать то, что вы просите.
hitautodestruct 02 дек. 2013, в 19:46
0

@Peter - я никогда не использовал ручки, поэтому пропустил это решение, но это определенно лучший путь. +1 ясен
Dangerous 02 дек. 2013, в 19:52

Ещё вопросы

@Peter Определенно лучший и быстрый способ сделать то, что вы просите.
@Peter - я никогда не использовал ручки, поэтому пропустил это решение, но это определенно лучший путь. +1 ясен

Dangerous · Accepted Answer · 2013-12-02T18-16-00.000Z

Я считаю, что следующее должно работать, но вам нужно добавить 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>

Можно было бы немного уменьшить это, но для удобочитаемости и понимания этого должно быть достаточно.

Спасибо, с небольшим изменением здесь и там, я заставил это работать. Еще раз спасибо всем ...