Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Usar td como checkbox

JQuery - Usar td como checkbox

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Javi
Val: 24
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Usar td como checkbox

Publicado por Javi (12 intervenciones) el 19/04/2018 23:47:37
Buenas, estoy intentando añadir una clase de css a la fila de una tabla al hacer click en alguno de sus td, y quitarla al volver a hacer click.
He probado con
1
2
3
$(".tdresClick").click(function(){
    $(".trresClick").addClass("resClick");
})
también
1
2
3
$(".tdresClick").on("click", function(){
	$(".trresClick").addClass("resClick");
});
que estaría mal, pero teóricamente debería añadir la clase a todas las filas, a ver si alguien puede echarme un cable e iluminarme, gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Javi
Val: 24
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Usar td como checkbox

Publicado por Javi (12 intervenciones) el 21/04/2018 00:16:01
He avanzado algo, consigo aplicar la clase de la siguiente forma (solo al td)

1
2
3
$("td.tdresClick").on("click", function(){
    $(this).addClass("resClick");
});

pero al intentar aplicar la clase al tr que contiene a ese td con parent() no funciona

1
2
3
$("td.tdresClick").on("click", function(){
    $(this).parent().addClass("resClick");
});

y por otro lado, al volver a hacer click ¿cómo puedo quitar la clase aplicada de nuevo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox
Val: 39
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Usar td como checkbox

Publicado por abzerox (14 intervenciones) el 21/04/2018 07:19:56
Hola, puedes usar el método toggleClass, para cuando sea hace click en el element si este no contine la clase la agrega de lo contrario la quita.

1
2
3
$(".trresClick").on("click", "td.tdresClick", function(){
    $(this).parent().toggeClass("resClick");
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Javi
Val: 24
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Usar td como checkbox

Publicado por Javi (12 intervenciones) el 21/04/2018 10:02:05
Hola abzerox, gracias por responder.
He probado tu código, pero sigue sin funcionar, paso todo tal y como lo tengo, el js del header, la estructura de la tabla y el css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
  $(document).ready(function(){
    //resaltar TR

    $(".tdresClick").on("click", "td.tdresClick", function(){
      $(this).parent().toggeClass("resClick");
    });
    //_________________________________________________________

  });
</script>
 
 
<table>
  <tr class="trresClick">
    <td class="tdresClick"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="trresClick">
    <td class="tdresClick"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="trresClick">
    <td class="tdresClick"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
 
 
#analisis .trresClick:hover{

	border-top:2px solid #D80000;

	border-bottom:2px solid #D80000;

}
.resClick{
	border-top:2px solid #D80000;

	border-bottom:2px solid #D80000;

}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox
Val: 39
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Usar td como checkbox

Publicado por abzerox (14 intervenciones) el 21/04/2018 10:17:29
El problema esta principalmente en el CSS, ya que los tr deben tener un display con valor table para poder tener borde, tambien corregi el js, comparto el código completo:

JS
1
2
3
4
5
$(document).ready(function(){
    $(".trresClick").on("click", "td.tdresClick", function(){
      $(this).parent().toggleClass("resClick");
    });
  });

CSS - Agrega esta linea a tus estilos
1
2
3
tr {
  display: table;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Javi
Val: 24
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Usar td como checkbox

Publicado por Javi (12 intervenciones) el 21/04/2018 14:10:40
Hola de nuevo, por fin he conseguido hacerlo, sospecho que no es la mejor forma pero funciona añadiendo el id de la tabla y la clase de la fila como argumentos en parent() y metiéndolo directamente en la etiqueta td:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table id="analisis">
  <tr class="trresClick">
    <td
    class="tdresClick"
    onclick="$(this).parent('#analisis .trresClick').toggleClass('resClick');">
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="trresClick">
    <td
    class="tdresClick"
    onclick="$(this).parent('#analisis .trresClick').toggleClass('resClick');">
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="trresClick">
    <td
    class="tdresClick"
    onclick="$(this).parent('#analisis .trresClick').toggleClass('resClick');">
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

intenté hacer el código para meter en el head así:

1
2
3
$(".tdresClick").on("click", "td.tdresClick", function(){
    $(this).parent("#analisis .trresClick").toggeClass("resClick");
});

pero no me funciona, y me gustaría saber cómo hacerlo por curiosidad e ir cogiendo la sintaxis de jquery.
Por cierto se me olvidaba comentar que antes de llegar a esto, he probado cambiando el display con css con todos los valores posibles (table, table-row, block...etc), y finalmente el css vale tal y como estaba ya que hereda el display correcto "table-row".
En todo caso muchas gracias por tu tiempo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar