tabla dinamica en JS puro sin frameworks

geshiro · 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 (html4strict) [Seleccionar]


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

eLank0 · 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 (javascript) [Seleccionar]

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

#!drvy · 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 (javascript) [Seleccionar]

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

MinusFour · 30 Octubre 2015, 15:36 PM

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

Código (javascript) [Seleccionar]


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 (javascript) [Seleccionar]


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);
	});
}

Test Foro de elhacker.net SMF 2.1

tabla dinamica en JS puro sin frameworks

geshiro

eLank0

#!drvy

MinusFour