Question

这是我的第一篇文章。我一直在寻找一个答案，但找不到。

我试图根据{td.status}中显示的文本（例如“ SUBMITTED”）来替换HTML中的图像源

我的HTML：

<table id = "myTable">
    <tbody>
    <tr>
        <th>Reference</th>
        <th>Version</th>
        <th>Last Modified</th>
        <th>Status</th>
    </tr>

        <tr th:each="td: ${thedata}">


            <td><span th:text="${td.thedataPrimaryKey.ref}"></span></td>
            <td><span th:text="${td.thedataPrimaryKey.version}"></span></td>
            <td><span th:text="${td.thedataTimestamp}"></span></td>

            <td><span><img class="myImage" th:src="@{/assets/images/offbulb.png}" style="width:15px; height:10px"; /></span><span th:text="${td.status}"></span></td>


    </tbody>
</table>

我的JS：

function f_color(){

    table = document.getElementById("myTable");

    if (table.getElementsByTagName('TD')[3].value == 'SUBMITTED') {

        var image = document.getElementsByClassName("myImage");

        image.src = "@{/assets/images/redbulb.png}";
    }
}

目前，我的空白灯泡正在显示，但没有被替换。在此之前，我设法通过更改字体颜色进行了类似的操作，但我希望通过更好的视觉效果对其进行升级，但是我很努力，希望得到任何帮助。

Answer 1

您需要用JavaScript来做吗？我认为应该由我自己在Thymeleaf中完成。

<td>
  <img th:if="${td.status != 'SUBMITTED'}" class="myImage" th:src="@{/assets/images/offbulb.png}" style="width:15px; height:10px"; />
  <img th:if="${td.status == 'SUBMITTED'}" class="myImage" th:src="@{/assets/images/redbulb.png}" style="width:15px; height:10px"; />
  <span th:text="${td.status}" />
</td>

Thymeleaf javascript基于表中的文本替换图像源

1 个答案: