javascript - Thymeleaf javascript 根据表格中的文本替换图像源

Question

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

我正在尝试根据 {td.status} 中显示的文本替换我的 HTML 中的图像源，例如“SUBMITTED”

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