Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » filtrar y contar filas html

JavaScript - filtrar y contar filas html

Volver
Nuevo Tema
<<>>
 
Vista:

filtrar y contar filas html

Publicado por alfonso (1 intervención) el 30/08/2019 20:14:29
Hola a todos, les comento mi caso, tengo una tabla html con cierta cantidad de registros , tengo una caja de texto que realiza el filtrado de la tabla. El detalle es, que si quisiera contar el total de filas y a la vez filtrar como lo haría , "estoy trabajando con javascript" espero que alguien me ayude...
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 Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

filtrar y contar filas html

Publicado por Alejandro (540 intervenciones) el 31/08/2019 15:56:04
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Supongo que recorres fila por fila para decir si se muestra o se oculta.
Creas un contador y si se muestra incrementas.
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
<!DOCTYPE HTML>
<html>
	<head>
		<script>
			window.onload=function(){
				document.getElementById('cmdFiltrar').addEventListener('click',function(){
					filtro = document.getElementById('txtFiltro').value;
					if(filtro==""){
						display="";
					}else{
						display="none";
					}
 
 
					tabla = document.getElementById('tblRegistros');
 
					contador=0;
					for( row of tabla.querySelectorAll('tr')){
						if(row.querySelectorAll('td')[1].innerHTML.toLowerCase()==filtro.toLowerCase()){
							row.style.display="";
							contador++;
							row.querySelectorAll('td')[0].innerHTML=contador;
						}else{
							row.style.display=display;
						}
					}
 
				});
			}
		</script>
	</head>
	<body>
		<input id="txtFiltro" type="text" /><button type="button" id="cmdFiltrar">Filtrar</button>
		<br />
		<table border="1">
			<thead>
				<tr><td>No.</td><td>Registro</td></tr>
			</thead>
			<tbody id="tblRegistros">
				<tr><td>1</td><td>Uno</td></tr>
				<tr><td>2</td><td>Dos</td></tr>
				<tr><td>3</td><td>Tres</td></tr>
				<tr><td>4</td><td>Uno</td></tr>
				<tr><td>5</td><td>Dos</td></tr>
				<tr><td>6</td><td>Tres</td></tr>
				<tr><td>7</td><td>Uno</td></tr>
				<tr><td>8</td><td>Dos</td></tr>
				<tr><td>9</td><td>Tres</td></tr>
				<tr><td>10</td><td>Uno</td></tr>
			</tbody>
		</table>
	</body>
</html>
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