Thymeleaf配合JavaScript获取隐藏数值设置元素背景色问题求助

你当前的逻辑错误出现在数值读取环节：

• 之前th:text设置为${item.getValue()}时，JS调用.html()读取到的是td元素内渲染的数值，所以逻辑可以正常运行
• 现在th:text替换为描述内容后，.html()读取到的是描述文本，自然无法通过数值校验，导致背景色设置逻辑不执行
• 另外td是非表单元素，没有原生value属性，你通过th:value写入的自定义属性，需要单独读取才能拿到值

推荐使用HTML5标准的data-*自定义属性存储数值，修改如下：

1. 调整HTML模板 #

将原来的th:value替换为th:data-value，符合HTML自定义属性规范：

<div th:each="item : ${myObject.getItems()}">
    <td style="font-size: 10px;" class="valueTD" th:text="${item.getDescription()}" th:data-value="${item.getValue()}"></td>
</div>

2. 修改JS取值逻辑 #

不再读取元素内的HTML内容，改为读取自定义data属性中存储的数值：

var colorTDs = $('.valueTD');
$.each(colorTDs, function (index, colorTD) {
    var value = Number($(colorTD).data('value'));
    if (!isNaN(value)) {
        var color = GreenYellowRed(value);
        $(colorTD).css('background-color', "rgb(" + color+ ")");
    }
});

如果不想修改HTML的th:value定义，也可以直接读取属性值，将取值行替换为var value = Number($(colorTD).attr('value'));即可临时兼容，但长期使用更推荐data-*的标准写法。

内容的提问来源于stack exchange，提问作者johnp