Imprimir Página - tabla dinamica en JS puro sin frameworks

Título: tabla dinamica en JS puro sin frameworks
Publicado por: geshiro 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>

Título: Re: tabla dinamica en JS puro sin frameworks
Publicado por: eLank0 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.

Título: Re: tabla dinamica en JS puro sin frameworks
Publicado por: #!drvy 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

Título: Re: tabla dinamica en JS puro sin frameworks
Publicado por: MinusFour 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);
	});
}

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: geshiro en 25 Octubre 2015, 22:01 pm