Tengo una salida.php. Crea una tabla html con 3 columnas: número de pregunta, respuesta correcta, respuesta del estudiante. Funciona como yo quiero.
Ahora lo que me gustaría es pintar de rojo las celdas con respuestas incorrectas de los estudiantes. Creo que Javascript es la mejor manera de hacer esto, en lugar de php.
Mirando otras respuestas aquí, esperaba que esto pudiera funcionar, pero, por desgracia ...
¿Puedes ayudarme a hacer que esto funcione?
<script type="text/javascript" > function paint_cells() { var tds = document.querySelectorAll('tbody td'), i; for(i = 0; i < tds.length; i += 3) { if(tds[i+1].textContent != tds[i+2].textContent){ tds[i+2].bgColor = "red"; } } </script>Creo que debe esperar a que se cargue la página DOM, intente a continuación. Y también depende de cómo y cuándo se genere la tabla en su página, si no funciona, proporcione más detalles.
<script type="text/javascript" > window.addEventListener('DOMContentLoaded', (event) => { var tds = document.querySelectorAll('tbody td'), i; for(i = 0; i < tds.length; i += 3) { if(tds[i+1].textContent != tds[i+2].textContent){ tds[i+2].bgColor = "red"; } } }); </script>¡Tu código funciona bien! Creo que su problema ocurre cuando su js se ejecuta antes de que el dom ya esté cargado. Tienes múltiples oportunidades para arreglar esto. 1) puede agregar su secuencia de comandos en la parte inferior dentro de la etiqueta del cuerpo. 2) trabajar con evento onload. https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onload
Nota ¿Quizás olvidó llamar a la función? paint_cells()
function paint_cells() { var tds = document.querySelectorAll('tbody td'), i; for(i = 0; i < tds.length; i += 3) { if(tds[i+1].textContent != tds[i+2].textContent){ tds[i+2].bgColor = "red"; } } } paint_cells(); <table border="1"> <thead> <tr> <th>Question</th> <th>Correct Answer</th> <th>Students Answer</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>right</td> <td>false</td> </tr> <tr> <td>abc</td> <td>right</td> <td>right</td> </tr> <tr> <td>abc</td> <td>right</td> <td>false</td> </tr> </tbody> </table>