Tengo una tabla donde cada fila contiene un producto y una casilla de verificación. Ahora quiero cambiar la decoración del texto según la casilla de verificación. Mi código javascript funcionó pero solo en la primera fila. Me di cuenta de que la identificación que estaba usando no era única. Por lo tanto, agregué un forloop.counter para crear identificadores únicos. Pero ahora no encontré una solución para que mi javascript maneje estas identificaciones. La tabla siempre tiene una cantidad diferente de filas. ¿Alguien tiene alguna idea?
¡Muchas gracias de antemano!
mi codigo html
{% for item in items %} <tr> <td name="product" id="product{{ forloop.counter }}">{{ item.product }}</td> <td><input type="checkbox" id="checkbox{{ forloop.counter }}"></td> </tr> {% endfor %}Mi javascript que está incluido en el html.
<script> document.getElementById('checkbox').onclick = function() { document.getElementById('product').style.textDecoration = this.checked ? "line-through" : "none"; }; </script>No necesita id para asociar la casilla de verificación y el producto, simplemente puede usar clases y encontrar el .product con el mismo padre que la casilla de verificación en la que se hizo clic.
Este es un ejemplo rápido del uso de la delegación de eventos aplicada a la tabla que observa los clics en las casillas de verificación. Utiliza closest() para acceder a las casillas de verificación seleccionadas tr antepasado que luego se consulta por un elemento secundario con el product de clase.
document.getElementById('table1').addEventListener('click', function(event) { if (event.target.type === 'checkbox') { const product = event.target.closest('tr').querySelector('.product'); product.style.textDecoration = event.target.checked ? "line-through" : "none"; } }); <table id="table1"> <tr> <td name="product" class="product">product 1</td> <td><input type="checkbox" ></td> </tr> <tr> <td name="product" class="product">product 2</td> <td><input type="checkbox" ></td> </tr> <tr> <td name="product" class="product">product 3</td> <td><input type="checkbox" ></td> </tr> </table>