I have a table with cells and want to move background settings for each cell to JavaScript. How to do it? For now I can't reach function color1
<head>
<script language="JavaScript">
function color1(row, col){
if(isOdd(row) && isOdd(col)) return "#f4cd8d";
if(isEven(row) && isEven(col)) return "#745853";
}
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}
th:style="'background: onload="javascript:color1(${rStat.count},${cStat.count})";'">
</td>
</tr>
</table>
</body>try calling JavaScript like this:
<table id="chessboard" border="1" cellspacing="0" cellpadding="0">
<tr height="30"
th:each="row, rStat : ${#numbers.sequence(1, 8)}">
<td th:id="${id}" width="30" th:each="col, cStat : ${#numbers.sequence(1, 8)}"
th:data-row=${rStat.count}
th:data-col=${cStat.count}
th:attr="onload='color1(${rStat.count},${cStat.count})'">
</td>
</tr>
</table>
and in javascript you can set the style of the field
function color1(row, col){
var cell = document.querySelector('#id');
var color;
if(isOdd(row) && isOdd(col)) color = "#f4cd8d";
if(isEven(row) && isEven(col)) color = "#745853";
cell.style.background = color;
}
Since you're already using JQuery, why not use the document.ready() to assign colors like this? No need for any JavaScript on the table itself.
<script>
$(document).ready(function () {
$('.chessboard-square').each(function () {
let row = parseInt($(this).data('row'));
let col = parseInt($(this).data('col'));
$(this).css('background-color', color1(row, col));
})
});
</script>
<!-- Table -->
<table id="chessboard" border="1" cellspacing="0" cellpadding="0">
<tr height="30" th:each="row, rStat : ${#numbers.sequence(1, 8)}">
<td class="chessboard-square" width="30" th:each="col, cStat : ${#numbers.sequence(1, 8)}"
th:data-row="${rStat.count}"
th:data-col="${cStat.count}">
</td>
</tr>
</table>