Tengo una tabla con celdas y quiero mover la configuración de fondo de cada celda a JavaScript. ¿Cómo hacerlo? Por ahora no puedo llegar a la función 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>intente llamar a JavaScript de esta manera:
<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>y en javascript puedes establecer el estilo del campo
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; }Dado que ya está usando JQuery, ¿por qué no usar document.ready() para asignar colores como este? No es necesario ningún JavaScript en la propia tabla.
<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>