如何在Thymeleaf的th:style中调用JavaScript函数设置单元格背景

• 你将JS调用写在了th:style属性中，该属性仅支持写入CSS样式规则，无法执行JS代码，浏览器会直接忽略这段无效内容。
• <td>元素本身不支持onload事件，即使把onload写法调整到正确的事件属性位置，也不会触发执行。
• 原有color1函数逻辑不全：行奇列偶、行偶列奇两种场景没有返回值，会返回undefined导致单元格无背景色。

<head>
    <script>
        // DOM全部渲染完成后再执行逻辑，避免找不到页面元素
        document.addEventListener('DOMContentLoaded', function() {
            const chessCells = document.querySelectorAll('#chessboard td');
            chessCells.forEach(cell => {
                // 读取Thymeleaf渲染时写入的行列号，转为数字类型
                const row = Number(cell.dataset.row);
                const col = Number(cell.dataset.col);
                // 给单元格设置背景色
                cell.style.backgroundColor = color1(row, col);
            })
        })

        function color1(row, col){
            if(isOdd(row) && isOdd(col)) return "#f4cd8d";
            if(isEven(row) && isEven(col)) return "#745853";
            // 补全剩余两种奇偶交叉场景的返回值
            return isOdd(row) ? "#745853" : "#f4cd8d";
        }    
        
        function isEven(n) {
           return n % 2 == 0;
        }
        
        function isOdd(n) {
           return Math.abs(n % 2) == 1;
        }  
    </script>       
</head>
<body>  
<table id="chessboard" border="1" cellspacing="0" cellpadding="0">
    <tr height="30"
        th:each="row, rStat : ${#numbers.sequence(1, 8)}">
        <td width="30"  th:each="col, cStat : ${#numbers.sequence(1, 8)}"            
            th:data-row=${rStat.count} 
            th:data-col=${cStat.count}> 
        </td>
    </tr>
</table>
</body>

• 删除了td标签上错误的th:style内联JS写法，不再在CSS属性中嵌入JS逻辑。
• 利用DOMContentLoaded事件控制JS执行时机，等表格全部渲染完成后再遍历单元格赋值，不会出现找不到元素的问题。
• 直接读取Thymeleaf提前写入data-*属性的行列号做计算，不需要在模板中拼接JS调用代码，维护性更高。
• 补全了color1函数的全部分支返回值，覆盖所有行列奇偶组合，棋盘格颜色可以正常交替显示。

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