Cómo cambiar el color de una fila en una tabla

Estoy desarrollando una tabla en html. Cada fila tiene una checkbox con el mismo nombre de atributo que la etiqueta tr. Así que quiero colorear la fila seleccionada en amarillo si esa prima es la única seleccionada, de lo contrario, colorea en azul todas las filas seleccionadas. Así que estaba desarrollando esto

var checked = $("input[@type=checkbox]:checked"); var nbChecked = checked.size(); if(nbChecked==1){ var row = $('tr[name*="'+checked.attr("name")+'"]'); row.style.backgroundColor="#FFFF33"; } 

Pero el color no cambia 🙁 ¿puedes decirme por qué? ¿Puedes ayudarme?

 <TR valign=top name="">  
<input type="checkbox" name="" onchange="analizeCheckBox()"/>
. . . . . .

Aunque este código no lo lleva a la realidad funcional, sí lo hace.

http://jsfiddle.net/4QKe9/5/

HEre es el Javascript:

 function updateRows() { var checked = $("input:checked"); var nbChecked = checked.size(); if (nbChecked == 1) { checked.parent().parent().css("background", "#FFFF33"); } } $(function () { $("input:checkbox").click(updateRows)});​ 

En primer lugar, tiene el color de fondo en la celda, no en la fila. Tienes que moverlo.

Aquí está su html fijo:

 

y luego este script funcionará

 $("td .ws7 input[type=checkbox]").bind({ click: function() { if ($(this).is(":checked")) { $(this).closest("tr").css("background-color", "#ffff33"); } else { $(this).closest("tr").css("background-color", "#33CCCC"); } } });​ 

cambie el selector “td .ws7” para que coincida con sus necesidades.

Ejemplo.

Cuando llama a la función jQuery $() con una cadena de selector, devolverá un objeto jQuery que es como una matriz incluso cuando solo 1 o 0 elementos coinciden . Entonces tu código:

 row = $('tr[name*="'+checked.attr("name")+'"]'); row.style.backgroundColor="#FFFF33"; 

No funciona porque row no es un elemento DOM con una propiedad de style , es un objeto jQuery que es como una matriz con muchos métodos adicionales. Se puede acceder a los elementos DOM individuales que coinciden con la notación estilo array, por lo que:

 row[0].style.backgroundColor = "#FFFF33"; 

Trabajará para actualizar el primer elemento DOM coincidente. Si nada coincide, la row[0] no estará definida y obtendrá un error. row.length te dirá cuántos elementos coinciden.

En tu código:

 var checked = $("input[@type=checkbox]:checked"); 

No necesita el símbolo @ para hacer coincidir los nombres de los atributos, por lo que "input[type=checkbox]:checked" está bien, pero "input:checkbox:checked" es más simple.

Por lo tanto, al llegar a su requisito real, que es cuando una sola fila tiene un recuadro marcado para establecer el fondo de esa fila en amarillo, pero si hay varias filas marcadas para establecer todos los fondos de esas filas en azul, puede hacerlo solo tres líneas de código:

 // reset all trs to default color $("tr").css("background-color", "yourdefaultcolorhere"); // select the checked checkboxes var checked = $("tr input:checkbox:checked"); // set the checked checkboxes' parent tr elements' background-color // according to how many there are checked.closest("tr").css("background-color", checked.length===1 ? "yellow" : "blue"); 

Tenga en cuenta que no necesita seleccionar el atributo de name en absoluto, porque el método .closest() jQuery le permitirá encontrar los elementos tr a los que pertenecen las casillas marcadas.

DEMO DE TRABAJO: http://jsfiddle.net/FB9yA/