Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Ordenar tabla html por value

JavaScript - Ordenar tabla html por value

Volver
Nuevo Tema
<<>>
 
Vista:

Ordenar tabla html por value

Publicado por Max (1 intervención) el 17/03/2020 20:02:26
Necesito ordenar elementos de una tabla html por la propiedad "value", no sé casi nada de javascript y todo lo que encuentro en internet sólo ordena los elementos por valores ya establecidos encerrados en <td></td>, pero yo necesito poder editar estos valores.
Quiero editar las entradas y ordenarlas a partir de los nuevos datos añadidos

1
2
3
4
5
6
7
<tr>
    <td><input id="num1"></td>
    <td><input id="num2"></td>
    <td><input id="num3"></td>
</tr>
 
<input type="button" onclick="ordenar()">

Por ejemplo:
en el input 1 ingreso el 100, en el input 2 el 200 y en el imput 3 el 300. Darle a un botón y ordenar estos nuevos datos.

100
200
300
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

Ordenar tabla html por value

Publicado por Alejandro (532 intervenciones) el 18/03/2020 17:21:47
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Te dejo un ejemplo.
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
<table border="1">
	<tr> <td><input type="text" value="3" size="3" /></td> <td>Tres</td> </tr>
	<tr> <td><input type="text" value="1" size="3" /></td> <td>Uno</td> </tr>
	<tr> <td><input type="text" value="2" size="3" /></td> <td>Dos</td> </tr>
</table>
 
<button type="button" id="cmdOrdenar">Ordenar</button>
 
<script>
	document.getElementById('cmdOrdenar').addEventListener('click', function( ) {
		var tabla = document.querySelector( 'table' );
		var filas = tabla.querySelectorAll( 'tr' );
		var nFilas = filas.length;
		while ( nFilas > 0 ) {
			for( var i = 1; i < nFilas; i++ ) {
				val1 = Number(filas[ i - 1 ].querySelector( 'input' ).value);
				val2 = Number(filas[ i ].querySelector( 'input' ).value);
				filas[ i - 1 ].querySelector( 'input' ).value = val1;
				filas[ i ].querySelector( 'input' ).value = val2;
				if ( val1 > val2 ) {
					trTmp = filas[ i - 1 ].innerHTML;
					filas[ i - 1 ].innerHTML = filas[ i ].innerHTML;
					filas[ i - 1 ].querySelector( 'input' ).value = val2;
					filas[ i ].innerHTML = trTmp;
					filas[ i ].querySelector( 'input' ).value = val1;
				}
			}
			nFilas--;
		}
	});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ordenar tabla html por value

Publicado por xve (2100 intervenciones) el 18/03/2020 19:34:12
Aquí otra manera que hemos comentado con Alejandro en el chat:

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
<table border="1">
    <tr> <td><input type="text" value="3" size="3" /></td> <td>Tres</td> </tr>
    <tr> <td><input type="text" value="1" size="3" /></td> <td>Uno</td> </tr>
    <tr> <td><input type="text" value="2" size="3" /></td> <td>Dos</td> </tr>
</table>
 
<button type="button" id="cmdOrdenar">Ordenar</button>
 
<script>
document.getElementById('cmdOrdenar').addEventListener('click', function( ) {
    let tabla = document.querySelector( 'table' );
    let filas = [...tabla.querySelectorAll( 'tr' )];
 
    filas.sort((a,b) => {
        let val_a = Number(a.querySelector( 'input' ).value);
        let val_b = Number(b.querySelector( 'input' ).value);
        if (val_a<val_b) {
            let tmpB=b.innerHTML;
            b.innerHTML=a.innerHTML;
            a.innerHTML=tmpB;
            b.querySelector( 'input' ).value=val_a;
            a.querySelector( 'input' ).value=val_b;
        }
    });
});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
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

Ordenar tabla html por value

Publicado por Alejandro (532 intervenciones) el 18/03/2020 20:07:47
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Me vi bien cavernicola con el método de la burbuja XD
Gracias @xve siempre se aprende contigo.
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