Question

我正在创建一个Bug跟踪系统作为学习Node.js的项目。我遇到的问题是我想相对于状态值更改表格行（在下面的屏幕截图中）的背景颜色（例如对于OPEN，我希望颜色为红色，对于关闭为绿色，等等）。

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

产生的错误：

ERROR

Answer 1

您的<tr>不应包含id，因为它可能会在页面上重复多次。我相信class在这里会更合适。有关ID和类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' : '' %>">

Answer 2

EJS是在服务器而不是浏览器上呈现的，因此EJS不知道document是什么，因为那是仅在浏览器中定义的。

您可以使用类似于Dan在上面的回答中所做的方式的内联样式来解决您的问题。

如何在ejs中向HTML元素添加自定义样式？

2 个答案: