Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » seleccionar una o varias filas de una tabla y marcar o desmarcar el check de la fila correspondiente

JavaScript - seleccionar una o varias filas de una tabla y marcar o desmarcar el check de la fila correspondiente

Volver
Nuevo Tema
<<>>
 
Vista:

seleccionar una o varias filas de una tabla y marcar o desmarcar el check de la fila correspondiente

Publicado por lauraro (1 intervención) el 11/05/2015 08:51:38
Buenos dias,

a ver si me podeis echar una mano que estoy un poco verde.

Tengo una tabla en la que puedo seleccionar/deseleccionar una o varias filas al pinchar sobre ellas, cambiando el color de la fila y seleccionando/deseleccionando el check correspondiente a la fila

Además desde un boton deberia poder borrar las filas seleccionadas desde el boton

Puedo seleccionar/deseleccionar filas cambiandolas de color pero no que se me marque/desmarque el check, podriais ayudarme y decirme como puedo borrar luego las filas seleccionadas?

Espero puedan ayudarme, muchas gracias!

tengo el siguiente codigo:

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
function seleccionarFila(fila) {
           if (document.getElementById(fila).className == "seleccionada"){
                document.getElementById(fila).className = "original";
 
            }  else {
               document.getElementById(fila).className = "seleccionada"
 
           }
 
 
}

HTML

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<table id="modeloUsuarios">
	<caption>Listado de usuarios modelo</caption>
	<thead>
	<tr>
		<th scope="col" id="col_seleccion" class="oculto"><input type="checkbox" id="check0"> </th>
		<th scope="col" id="cab_centro">Centro</th>
		<th scope="col" id="cab_especialidad">Especialidad</th>
		<th scope="col" id="cab_categoria">Categor&iacute;a</th>
		<th scope="col" id="cab_tipo" >Tipo personal</th>
		<th scope="col" id="cab_ambito">&Aacute;mbito</th>
		<th scope="col" id="cab_unidad">Unidad</th>
		<th scope="col" id="cab_modelo">Modelo</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
		<td colspan="8">Resultados usuarios modelo</td>
	</tr>
	</tfoot>
	<tbody id="datos">
	<tr id="fila1" class="original" onclick="seleccionarFila(id);">
		<td headers="col_seleccion"><input type="checkbox" id="check1> </td>
		<td headers="cab_centro">A</td>
		<td headers="cab_especialidad">0123456789012345678901234567890123456789</td>
		<td headers="cab_categoria">H</td>
		<td headers="cab_tipo">0123456789</td>
		<td headers="cab_ambito">Ambito 1</td>
		<td headers="cab_unidad">01234567890123456789012345678901234567890123456789</td>
		<td headers="cab_modelo">01234567890123456789</td>
	</tr>

	<tr id="fila2" class="original"  onclick="seleccionarFila(id);">
		<td class="oculto" headers="col_seleccion"><input type="checkbox" id="check2"> </td>
		<td headers="cab_centro">C</td>
		<td headers="cab_especialidad">0123456789012345678901234567890123456789</td>
		<td headers="cab_categoria">012345678901234567890123456789012345678901234567890123456789</td>
		<td headers="cab_tipo">0123456789</td>
		<td headers="cab_ambito">Ambito 1</td>
		<td headers="cab_unidad">01234567890123456789012345678901234567890123456789</td>
		<td headers="cab_modelo">01234567890123456789</td>
	</tr>

	<tr id="fila3" class="original" onclick ="seleccionarFila(id);">
		<td class="oculto" headers="col_seleccion"><input type="checkbox" id="check3"> </td>
		<td headers="cab_centro">G</td>
		<td headers="cab_especialidad">0123456789012345678901234567890123456789</td>
		<td headers="cab_categoria">012345678901234567890123456789012345678901234567890123456789</td>
		<td headers="cab_tipo">0123456789</td>
		<td headers="cab_ambito">Ambito 2</td>
		<td headers="cab_unidad">01234567890123456789012345678901234567890123456789</td>
		<td>01234567890123456789</td>

	</tr>

	<tr id="fila4" class="original" onclick ="seleccionarFila(id);">
		<td class="oculto" headers="col_seleccion"><input type="checkbox" id="check4"> </td>
		<td headers="cab_centro">0123456789012345678901234</td>
		<td headers="cab_especialidad">0123456789012345678901234567890123456789</td>
		<td headers="cab_categoria">012345678901234567890123456789012345678901234567890123456789</td>
		<td headers="cab_tipo">0123456789</td>
		<td headers="cab_ambito">Ambito 3</td>
		<td headers="cab_unidad">01234567890123456789012345678901234567890123456789</td>
		<td headers="cab_modelo">01234567890123456789</td>
	</tr>

</tbody>
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 Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

seleccionar una o varias filas de una tabla y marcar o desmarcar el check de la fila correspondiente

Publicado por Vainas (258 intervenciones) el 12/05/2015 08:48:08
Buenas:

No es mi mejor codigo pero aqui dejo una posible solucion. yo le pasaria a la funcion el nombre del input de esta manera:

1
<tr id="fila2" class="original"  onclick="seleccionarFila(id, 'check2');">

Con esto dentro del codigo ya puedo hacer algo asi:

1
2
3
4
5
6
7
8
9
function seleccionarFila(fila, chk) {
           if (document.getElementById(fila).className == "seleccionada"){
                document.getElementById(fila).className = "original";
                document.getElementById(chk).checked = false;
            }  else {
               document.getElementById(fila).className = "seleccionada";
               document.getElementById(chk).checked = true;
           }
}

Para terminar y que no exista algun fallo al hacer click sobre el input lo pondria readonly, con esto intento evitar (puede que suceda o no) que se desencadene antes o despues, no lo se, el evento del input y despues el onclick ..... o lo contrario.

1
<input type="checkbox" id="check2" readonly>

Espero que sirva.

Saludos.
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