Как добавить пользовательский стиль в элемент HTML в ejs?

Question

Как добавить пользовательский стиль в элемент HTML в ejs?

1

Я создаю систему отслеживания ошибок в качестве проекта для изучения Node.js. Проблема, с которой я сталкиваюсь, заключается в том, что я хочу изменить цвет фона строки таблицы (на снимке экрана ниже) в соответствии со значением состояния (как для ОТКРЫТОГО, я хочу красный цвет, зеленый для закрытого и т.д.).

<table class="table">
    <thead>
        <tr>
            <th>Project</th>
            <th>Status</th>
            <th>Date Created</th>
            <th>Bug</th>
            <!--  -->
            <th>Description</th>
            <th>Date Solved</th>

        </tr>
    </thead>     
    <tbody>
        <% bugs.forEach(function(bugs){ %>
        <tr id ="color">
            <td><a style="text-decoration:none" href="/"><%= bugs.projectName%></a></td>
            <td><%= bugs.status %> 
                <% if (bugs.status === "OPEN") { %>
                <% document.getElementById("color").style.color = "green"; %>
                <% } %>                         
            </td>
            <td><%= bugs.dateCreated %></td>
            <td><a style="text-decoration:none; color : #000;" href="/bugs/<%= bugs._id %>"><%= bugs.title %></a></td>
            <td><a style="text-decoration:none; color : #000;" href="/bugs/<%= bugs._id %>"><%= (bugs.description).substr(0, 40) %></a></td>
            <td><%= bugs.dateSolved %></td>
        </tr>  
        <% }); %>
    </tbody>
</table>

Произошла ошибка:

ОШИБКА

Nitin Khare 04 фев. 2019, в 19:32

Источник

1

Вы захотите использовать style.backgroundColor вместо style.color если вы хотите изменить цвет фона, а не цвет текста.
Christopher Bradshaw 04 фев. 2019, в 17:41

Теги:

javascript

node.js

ejs

2 ответа

Ещё вопросы

Вы захотите использовать style.backgroundColor вместо style.color если вы хотите изменить цвет фона, а не цвет текста.

Christopher Bradshaw · Answer 1 · 2019-02-04T16-49-00.000Z

EJS отображается на сервере, а не в браузере, поэтому EJS не имеет представления, что это за document, поскольку он определен только в браузере.

Вы можете решить свою проблему, используя встроенные стили, аналогичные тем, что сделал Дэн в своем ответе выше.

Dan · Answer 2 · 2019-02-04T16-05-00.000Z

У вашего <tr> не должно быть id поскольку он, вероятно, повторяется на вашей странице несколько раз. Я считаю, что class будет более подходящим здесь. Больше информации о различиях между идентификаторами и классами https://css-tricks.com/the-difference-between-id-and-class/.

Я думаю, что-то вроде этого, добавленное к вашему <tr> может помочь.

<tr style="<%= bugs.status === 'OPEN' ? 'color: green' : '' %>">

Имейте в виду одну вещь; большинство людей смотрят свысока на встроенные стили, как мой пример. Лучшим вариантом было бы создать класс стилей, в котором были бы все стили, которые вы хотите для своих "открытых" строк, и применить этот класс, используя аналогичную троицу, как я показал выше.

// somewhere in your stylesheet
.open-bug { color: green; }
<tr class="<%= bugs.status === 'OPEN' ? 'open-bug' : '' %>">

Я думаю, что вы должны использовать одинарные кавычки, а не двойные кавычки для «OPEN».
@ChristopherBradshaw спасибо, что поймали это. Я обновил свой ответ. Для справки: это должны быть одинарные кавычки, потому что они уже внутри набора двойных кавычек.
Спасибо за ответ, который работал для меня.
Рад помочь. Если вы не возражаете, выбрав мой ответ в качестве того, который сработал для вас, это может помочь будущим программистам в решении ваших задач Благодарю.