如何自定义样式添加到EJS一个HTML元素?

问题描述 投票:1回答:2

我创建一个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

javascript node.js ejs
2个回答
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' : '' %>">

1
投票

EJS呈现服务器,而不是浏览器,所以EJS不知道document就是因为这件事情,只有在浏览器中定义的。

您可以通过使用类似于丹在他的回答上面是怎么做的内嵌样式解决您的问题。

© www.soinside.com 2019 - 2024. All rights reserved.