tabla dinamica en JS puro sin frameworks

Foro de elhacker.net

Programación

Desarrollo Web (Moderador: #!drvy)

tabla dinamica en JS puro sin frameworks

0 Usuarios y 1 Visitante están viendo este tema.

Páginas: [1]

Autor

Tema: tabla dinamica en JS puro sin frameworks (Leído 4,035 veces)

geshiro

Desconectado

Mensajes: 178

tabla dinamica en JS puro sin frameworks

« en: 25 Octubre 2015, 22:01 pm »

como puedo hacer mi codigo hacerlo dinamico , como lo hago mediante un solo for cada ves que le doy click se vayan agregando

Código

<html>
<head>
	<title>form</title>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>nombre:</th>
				<th>cantidad:</th>
				<th>precio:</th>
			</tr>
			<tr>
				<th><input type="text" id="name" placeholder="name"/></th>
				<th><input type="text" id="quantity" placeholder="quantity"/></th>
				<th><input type="text" id="price" placeholder="price"/></th>
				<th><input type="button" id="btn" value="add"/></th>
			</tr>
		</thead>	
		<tbody id="data_table">
		</tbody>
	</table>
	<script type="text/javascript">
window.onload = function(){
	byId('btn').onclick = function(){
		var data = {
			name: byId('name').value,
			quantity: byId('quantity').value,
			price: byId('price').value
		};
		for(i=0;i<byTag(document,'input').length;i++){
			 document.getElementById("data_table").innerHTML += "<tr><td>"+data['name']+"</td><td>"+data['quantity']+"</td><td>"+data['price']+"</td></tr>";
		}
		console.log(arguments);
	}
}
	</script>
</body>
</html>


« Última modificación: 27 Octubre 2015, 13:25 pm por #!drvy »	En línea

eLank0

eLhAcKeR r00Lz

Desconectado

Mensajes: 1.062

Re: tabla dinamica en JS puro sin frameworks

« Respuesta #1 en: 30 Octubre 2015, 13:57 pm »

Buenas,

Tienes algunos errores de falta de atención o por copiar demasiado rápido, byId y byTag no son funciones nativas de javascript, entre otras cosas:

Este código funciona correctamente!

Código

<html>
<head>
	<title>form</title>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>nombre:</th>
				<th>cantidad:</th>
				<th>precio:</th>
			</tr>
			<tr>
				<th><input type="text" id="name" placeholder="name"/></th>
				<th><input type="text" id="quantity" placeholder="quantity"/></th>
				<th><input type="text" id="price" placeholder="price"/></th>
				<th><input type="button" id="btn" value="add" onClick="geshiro()"/></th>
			</tr>
		</thead>	
		<tbody id="data_table">
		</tbody>
	</table>
	<script type="text/javascript">
	var geshiro = function(){
		var data = {
			name: document.getElementById('name').value,
			quantity: document.getElementById('quantity').value,
			price: document.getElementById('price').value
		};
 
	  document.getElementById("data_table").innerHTML += "<tr><td>"+data['name']+"</td><td>"+data['quantity']+"</td><td>"+data['price']+"</td></tr>";
	}
	</script>
</body>
</html>

Salu2

PD: El for sobraba, ya que estabas añadiendo una fila para cada input de tu formulario, 3 text y un button.


« Última modificación: 30 Octubre 2015, 14:00 pm por eLank0 »	En línea

#!drvy

Moderador

Desconectado

Mensajes: 5.855

Re: tabla dinamica en JS puro sin frameworks

« Respuesta #2 en: 30 Octubre 2015, 14:37 pm »

Aparte de lo que ha mencionado eLank0, no te recomiendo usar innerHTML para tratar elementos del DOM. De hecho, no te lo recomiendo para nada que no sea modificar el DOM entero de una.

Cada vez que haces un innerHTML +=, el navegador re-procesa todo el dom y resetea todas las instancias y valores de los elementos afectados. Así, si por alguna casualidad tienes un checkbox en cada fila, seleccionas uno y añades otra fila, veras el que el checkbox seleccionado volverá a su estado original. Por no hablar que a pesar de que innerHTML esta implementado por todos los navegadores famosos, NO es un estándar.

Código

window.onload = function(){
    document.getElementById('btn').onclick = function(){
 
        var data = {
            name: document.getElementById('name').value,
            quantity: document.getElementById('quantity').value,
            price: document.getElementById('price').value
        };
 
        var tr = document.createElement('tr');
 
        for(var a=0; a < Object.keys(data).length; ++a){
            var td = document.createElement('td');
            td.textContent = data[Object.keys(data)[a]];
            tr.appendChild(td);
        }
 
        document.getElementById('data_table').appendChild(tr);
    }
}

PD: Ademas, innerHTML te puede provocar muchos dolores de cabeza cuando lo utilizas a cara del usuario... trata todo lo que le das como un código HTML, con sus respectivas posibilidades de meter XSS por ejemplo. Si vas insertar solo texto en algún lado, utiliza textContent.

Saludos


« Última modificación: 30 Octubre 2015, 14:50 pm por #!drvy »	En línea

https://www.youtube.com/watch?v=oqKsrSXLR98

MinusFour

Moderador Global

Desconectado

Mensajes: 5.529

I'm fourth.

Re: tabla dinamica en JS puro sin frameworks

« Respuesta #3 en: 30 Octubre 2015, 15:36 pm »

No veo porque trabajar con un objeto? Sería mejor un arreglo.

Código

window.onload = function(){
      document.getElementById('btn').addEventListener('click', function(){
		var data = [ document.getElementById('name'), document.getElementById('quantity'), document.getElementById('price') ];
                var tr = data.reduce(function(tr, d){
                     var td = document.createElement('td');
                     td.textContent = d.value;
                     tr.appendChild(td);
                     return tr;
                }, document.createElement('tr'));
                document.getElementById('data_table').appendChild(tr);
	});
}

Te ahorrarias cambiar tu función cada que agregues nuevos inputs con qSA (>IE 8+).

Código

window.onload = function(){
      document.getElementById('btn').addEventListener('click', function(){
		var data = document.querySelectorAll('input[type="text"]'); //una clase seria preferible
                var tr = Array.prototype.reduce.call(data, function(tr, d){ //reduce >IE 9+
                     var td = document.createElement('td');
                     td.textContent = d.value;
                     tr.appendChild(td);
                     return tr;
                }, document.createElement('tr'));
                document.getElementById('data_table').appendChild(tr);
	});
}


« Última modificación: 30 Octubre 2015, 15:47 pm por MinusFour »	En línea

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Frameworks Desarrollo Web	IWKY	6	4,120	4 Junio 2012, 19:27 pm por IWKY
	como crear tabla dinamica con un select dinamico php PHP	include ();	3	11,828	21 Septiembre 2012, 03:05 am por include ();
	Necesito ayuda para hacer una tabla dinamica con ajax,mysql y php PHP	juancarlossoma	3	5,011	4 Octubre 2012, 19:32 pm por 4rkn63l
	Sobre frameworks JS Desarrollo Web	[u]nsigned	0	1,735	27 Agosto 2015, 19:34 pm por [u]nsigned
	Creación de tabla dinámica con ajax, javascript, php y mysql Desarrollo Web	Connor2431	1	1,726	19 Octubre 2018, 20:28 pm por #!drvy