0
170
Vistasjquery cuando la casilla de verificación está marcada, entonces padre tr + otro cambio de fondo de rango de fila tr
¿Cómo puedo cambiar el fondo de los elementos tr de rango de fila cuando la casilla de verificación está marcada? Los elementos tr tienen el atributo rowspan.
Mi código JS es...
$(document).ready(function(){ $('.test-table-list input[type="checkbox"]').click(function(){ if($(this).is(':checked')){ $(this).parents('tr').css('background', 'yellow'); }else{ $(this).parents('tr').css('background', '#fff'); } }); });cuando usé este código, tr cambie como esta imagen
No creo que el código html sea necesario, así que no lo adjuntaré.
Quiero que cambie el color de fondo de todos los elementos tr(colspan) relacionados con el tr marcado.
===== EDITAR ====
Adjunté mi código completo en CODEPEN
https://codepen.io/hongkt/pen/NWvxoOE
Alguien sabe la respuesta? Quiero que todos los elementos tr relacionados cambien el color de fondo.
3 Respuestas
Responde la pregunta0
Usar una clase y cambiarla
$(function(){ $('.test-table-list input[type="checkbox"]').on("click", function() { $(this).closest('tr').toggleClass('yellowClass',this.checked) }) })0
Puede probar siguiendo el método colocando la parte completa (las etiquetas tr que deben tener el mismo fondo) en un contenedor separado (tal vez span p h1 , aquí se usa div )
El ajuste de
trcon la etiquetadives unhtmlno válido según lo dicho por @ mplungjan
Y luego seleccione esa etiqueta usando .parentElement o .closest (intenté esto pero no funcionó, seguramente puede intentarlo).
Y luego seleccionó la etiqueta tr y ejecutó un bucle forEach y aplicó fondo a todos.
var y function func(e) { if (e.checked) { e.parentElement.parentElement.parentElement.querySelectorAll('tr').forEach(y => y.style.backgroundColor = 'rgb(255, 222, 89)') //document.body.style.backgroundColor = "red" } else { e.parentElement.parentElement.parentElement.querySelectorAll('tr').forEach(y => y.style.backgroundColor = '#fff') //document.body.style.backgroundColor = "blue" } } td { border: 1px solid #ccc } <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <table class='order-list'> <div> <tr> <td rowspan='3'><input type='checkbox' onclick="func(this)" /></td> <td>test</td> <td rowspan='3'>test1</td> <td rowspan='3'>test2</td> <td>test3</td> <td rowspan='3'>test4</td> </tr> <tr> <td>test3</td> <td>test3</td> </tr> <tr> <td>test3</td> <td>test3</td> </tr> </div> </table>Como el código anterior usa
querySelectorAllpara que todas las etiquetastrestén seleccionadas y tengan un color debackgroundColor, puede probar una forma más específica y seleccionar solo dentro dediv. Uno puede ser.getElementsByTagName("tr")y luego recorrer usandoforloop
Pero lo principal, para facilitar el trabajo, es mantenerlos en un contenedor separado ( div )
0
Lo que necesita es cambiar su script jquery a:
$(document).ready(function(){ $('.order-list input[type="checkbox"]').click(function(){ if($(this).is(':checked')){ var el = $(this).parents('tr'); el.css('background', 'rgb(255, 222, 89)'); el.next().css('background', 'rgb(255, 222, 89)'); el.next().next().css('background', 'rgb(255, 222, 89)'); }else{ var el = $(this).parents('tr'); el.css('background', '#fff'); el.next().css('background', '#fff'); el.next().next().css('background', '#fff'); } });});ACTUALIZACIÓN PARA SUB FILAS VARIABLES
la modificación al html es encerrar lo que desea que se coloree en una etiqueta tbody y luego jquery se puede manipular en consecuencia.
$(document).ready(function(){ $('.order-list input[type="checkbox"]').click(function(){ if($(this).is(':checked')){ $(this).closest('tbody').css('background', 'rgb(255, 222, 89)'); }else{ $(this).closest('tbody').css('background', '#fff'); } }); }); <table class='order-list'> <tbody> <tr> <td rowspan='3'><input type='checkbox' /></td> <td >test</td> <td rowspan='3'>test1</td> <td rowspan='3'>test2</td> <td >test3</td> <td rowspan='3'>test4</td> </tr> <tr><td >test3</td><td >test3</td></tr> <tr><td >test3</td><td >test3</td></tr> </tbody> <tbody> <tr> <td rowspan='3'><input type='checkbox' /></td> <td >test</td> <td rowspan='3'>test1</td> <td rowspan='3'>test2</td> <td >test3</td> <td rowspan='3'>test4</td> </tr> <tr><td >test3</td><td >test3</td></tr> <tr><td >test3</td><td >test3</td></tr> </tbody> </table>