Javascript Thymeleaf заменяет источник изображения на основе текста в таблице

Question

это мой первый пост. Я пытался найти ответ, но не могу его найти.

Я пытаюсь заменить источник изображения в моем HTML в зависимости от текста, отображаемого в {td.status}, например, "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>