Quiero revelar la puntuación de una línea en la tabla al hacer clic.
Ahora solo oculta y muestra la primera partitura. ¿Hay alguna manera de que pueda hacer que cuando presione el botón no revele todos los puntajes? ¡Gracias! Esto es lo que probé:
HTML:
<table> {% for i in games %} <tbody> <tr> <td> {{i['homeTeam']}} </td> <td style="display: none;" id="score"> {{i['homeTeamScore']}} - {{i['awayTeamScore']}} </td> <td> {{i['awayTeam']}} </td> <td><button onclick="displayScore()">Reveal score</button></td> </tr> </tbody> {% endfor %} </table>JavaScript:
function displayScore() { var x = document.getElementById("score"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } <td style="display: none;" id="score_{{loop.index}}"> {{i['homeTeamScore']}} - {{i['awayTeamScore']}} </td> Esto le dará algo como score_1, score_2, etc
onclick que tiene en cada botón (lo reemplazaremos con un detector de eventos. Algo así como <td><button data-index="{{loop.index}}">Reveal score</button></td>Ahora agregue un detector de eventos al hacer clic en el cuerpo de la tabla. Dado que cada botón está dentro de una fila de la tabla que también está dentro del cuerpo de la tabla, al hacer clic en el botón, el evento "burbujeará" hasta el cuerpo de la tabla, lo que activará el oyente que ha adjuntado al cuerpo de la tabla.
El detector de eventos se adjunta al cuerpo de la tabla y no directamente a los botones porque sus botones se generan dinámicamente, es decir, los botones se agregan en tiempo de ejecución (después de que su código javascript ya existe), lo que significa que el sistema no está al tanto de esos botones.
document.querySelector("tbody").onclick = function(e){ // Find out which elem which was clicked const clicked_elem = e.target; // If this clicked elem is a button, then execute our code if (clicked_elem.tagName == "BUTTON"){ // First identify which button was clicked const index = clicked_elem.dataset.index // Now get the td corresponding to that button var x = document.getElementById("score_" + index); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } }