Foros del Web » Programación web » Javascript »

Aumentar filas a una tabla html al dar click

Estas en el tema de Aumentar filas a una tabla html al dar click en el foro de Javascript en Foros del Web. Hola gente... ahora tengo otra dificultad. Estoy realizando un sistema para una libreria, y quiero registrar compras... el asunto es que quiero darle click a ...
  #1 (permalink)  
Antiguo 02/01/2008, 16:06
 
Fecha de Ingreso: diciembre-2007
Mensajes: 9
Antigüedad: 6 años, 9 meses
Puntos: 0
Aumentar filas a una tabla html al dar click

Hola gente... ahora tengo otra dificultad.

Estoy realizando un sistema para una libreria, y quiero registrar compras... el asunto es que quiero darle click a un boton y que se aumente una nueva fila a mi columna... y asi cada ves que se de click en el boton.

si alguien sabe como hacer eso... porfavor responda... busque hacerlo con AJAX pero no lo logro.

POR FAVOR... A Y U D A...
  #2 (permalink)  
Antiguo 02/01/2008, 17:19
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 9 años
Puntos: 53
Re: Aumentar filas a una tabla html al dar click

con ajax quedaria mas lindo, pero con php tambien se puede hacer solo q al querer agregar una fila mas vas a tener q recargar la pagina
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 03/01/2008, 05:03
 
Fecha de Ingreso: diciembre-2007
Mensajes: 9
Antigüedad: 6 años, 9 meses
Puntos: 0
Re: Aumentar filas a una tabla html al dar click

Gracias amigo...

Si, con ajax quedaria super...

Con php no porque mi tabla es esta:

---------------------------------------------------------------
| SELECT v | INPUT TEXT | INPUT TEXT |
---------------------------------------------------------------

No se si me explico, en cada fila tengo una lista de ITEMS, y los otros input type="text" son para poner la cantidad y el costo... el caso es que quiero que al dar clik a un boton, se me cree otra fila con estos 3 elementos.

Ahora ves lo complicado que seria hacerlo en PHP (pues si lo hago con esto ultimo, tendria que ingeniarmelas para no perder los datos del formulario al recargarlo... ademas que serian muuuuchos...) o me equivoco???...

GRACIAS...
  #4 (permalink)  
Antiguo 03/01/2008, 10:58
Avatar de xcars  
Fecha de Ingreso: mayo-2005
Mensajes: 742
Antigüedad: 9 años, 4 meses
Puntos: 4
Re: Aumentar filas a una tabla html al dar click

pues te aclaro que no nocesariamente es AJAX lo que tienes que utilizar, mas bien es saber DOM y Javascript, con PHP no porque PHP es lenguaje de servidor y esta tarea se realiza en el cliente.
Yo lo tengo hecho, no es exactamente lo que quieres, pero solo tendrias que adaptarlo, dejame buscar el codigo y lo pego en un par de horas, pues debo salir a almorzar en este momento.
__________________
Mess with the best.... die like the rest
[B]Anuncios Clasificados Gratis
  #5 (permalink)  
Antiguo 03/01/2008, 11:07
Avatar de xcars  
Fecha de Ingreso: mayo-2005
Mensajes: 742
Antigüedad: 9 años, 4 meses
Puntos: 4
Re: Aumentar filas a una tabla html al dar click

este codigo lo pones en tu etiqueta HEAD
Código:
			function addFriend() {
				fieldCount++;
				if(fieldCount<=10)
				{
				var newFriend = document.createElement('input');
				newFriend.type = 'text';
				newFriend.name = 'friend' + fieldCount;
				newFriend.id = 'friend' + fieldCount;
				newFriend.setAttribute('attributeName','attributeValue')
				newFriend.setAttribute('maxlength','8')
				newFriend.setAttribute('size','12')
				document.getElementById('fs').appendChild(newFriend);
				}
El CSS
Código:
		<style type="text/css">
			input {
				display: block;
				margin-bottom: 2px;
			}
			button{
				float: right;
			}
			fieldset {
				border: 1px solid black;
			}
		</style>
En el html
Código HTML:
 <fieldset id="fs-principal">
				<legend> Enviar Estampa </legend>
			<label for="you">Codigo de Verificacion de tu Estampa Ej. 25426</label>
			<input type="text" name="codigo_stamp" id="stamp" maxlength="12" size="12"  ><br/>
			<label for="you">TU movil</label>
			<input type="text" name="you" id="you" maxlength="8" size="12" ><br/>
			<label for="you">Nickname o Firma</label>
			<input type="text" name="nick" id="nick" size="12" maxlength="8" >

			<fieldset id="fs">
				<legend>Enviar al movil de mis Amigos</legend>
				<button onclick="addFriend(); return false;" class="mas" >
				</button>
				<input type="text" name="friend1" id="friend1" maxlength="8" size="12">
			</fieldset> 
bueno algo asi es, he tenido que ir cortando las partes innecesarias pero si no te funciona de entrada, pues puede ser que borre algo que no debia, pero es la idea, la clave esta en el javascript, si lo entiendes, lo podras resolver.
__________________
Mess with the best.... die like the rest
[B]Anuncios Clasificados Gratis
  #6 (permalink)  
Antiguo 03/01/2008, 11:24
Avatar de _ssx  
Fecha de Ingreso: mayo-2003
Ubicación: mX
Mensajes: 683
Antigüedad: 11 años, 4 meses
Puntos: 60
Re: Aumentar filas a una tabla html al dar click

Modifique un codigo que tenia que encontre por ahi para hacer upload multiple.. y lo adapte.. espero te sirva al menos como idea..

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
var upload_number=1;
	function addFileInput() {
	var i=0;
 	var d = document.createElement("div");
	var file0 = document.createElement("select");
 	file0.setAttribute("name", "select[]");
	file0.options[i] = new Option('fas','saf');
	i++;
	file0.options[i] = new Option('fdd','fsa');
	d.appendChild(file0);
 	var file = document.createElement("input");
 	file.setAttribute("type", "text");
 	file.setAttribute("name", "campo1[]");
	d.appendChild(file);
	var file2 = document.createElement("input");
 	file2.setAttribute("type", "text");
 	file2.setAttribute("name", "campo2[]");
 	d.appendChild(file2);
 	document.getElementById("moreUploads").appendChild(d);
 	upload_number++;
}
</script>
<title>Untitled Document</title>
</head>

<body>
<p>
  <select name="select[]" id="select[]">
    <option value="fas">saf</option>
    <option value="fdd">fsa</option>
  </select>
  
  <input name="campo1[]" type="text" id="campo1[]" />
  <input name="campo2[]" type="text" id="campo2[]" />
  <input type="button" name="button" id="button" value="Crear otra fila" onclick="addFileInput()"/>
</p>
<p>&nbsp;</p>
                <div id="moreUploads"></div>
                
</body>
</html> 
__________________
Escribe tu código de forma que refleje, y saque a relucir,lo mejor de tu carácter personal
www.oscararzola.com/blog
Principios de un programador
  #7 (permalink)  
Antiguo 03/01/2008, 11:37
 
Fecha de Ingreso: enero-2008
Mensajes: 608
Antigüedad: 6 años, 8 meses
Puntos: 56
Re: Aumentar filas a una tabla html al dar click

checate este codigo. Son 2 funciones para agregar una linea (con select y 2 input) y borrar la ultima linea

Código:
<html>
<head>
<script>
var contLin = 3;
function agregar() {
	var tr, td;

	tr = document.all.tabla.insertRow();
	td = tr.insertCell();
	td.innerHTML = "<select id='sel" + contLin + "'>" +
	               "<option>1" +
	               "<option>2" +
	               "<option>3";
	td = tr.insertCell();
	td.innerHTML = "<input type='text' id='t" + contLin + "1' value='t" + contLin + "1'>";
	td = tr.insertCell();
	td.innerHTML = "<input type='text' id='t" + contLin + "2' value='t" + contLin + "2'>";
	contLin++;
}
function borrarUltima() {
	ultima = document.all.tabla.rows.length - 1;
	document.all.tabla.deleteRow(ultima);
	contLin--;
}
</script>
</head>
<body>
<table id="tabla" border=1>
	<tr>
		<td><select id="sel1">
			<option>1
			<option>2
			<option>3
		</td>
		<td><input type="text" id="t11" value="t11"></td>
		<td><input type="text" id="t12" value="t12"></td>
	</tr>
	<tr>
		<td><select id="sel2">
			<option>1
			<option>2
			<option>3
		</td>
		<td><input type="text" id="t21" value="t21"></td>
		<td><input type="text" id="t22" value="t22"></td>
	</tr>
</table>
<br>
<input type="button" value="Agregar" onclick="agregar()">
<input type="button" value="Borrar ultima" onclick="borrarUltima()">
</body>
</html>
  #8 (permalink)  
Antiguo 03/01/2008, 11:54
Avatar de _ssx  
Fecha de Ingreso: mayo-2003
Ubicación: mX
Mensajes: 683
Antigüedad: 11 años, 4 meses
Puntos: 60
Re: Aumentar filas a una tabla html al dar click

Cita:
Iniciado por posman Ver Mensaje
checate este codigo. Son 2 funciones para agregar una linea (con select y 2 input) y borrar la ultima linea

Código:
<html>
<head>
<script>
var contLin = 3;
function agregar() {
	var tr, td;

	tr = document.all.tabla.insertRow();
	td = tr.insertCell();
	td.innerHTML = "<select id='sel" + contLin + "'>" +
	               "<option>1" +
	               "<option>2" +
	               "<option>3";
	td = tr.insertCell();
	td.innerHTML = "<input type='text' id='t" + contLin + "1' value='t" + contLin + "1'>";
	td = tr.insertCell();
	td.innerHTML = "<input type='text' id='t" + contLin + "2' value='t" + contLin + "2'>";
	contLin++;
}
function borrarUltima() {
	ultima = document.all.tabla.rows.length - 1;
	document.all.tabla.deleteRow(ultima);
	contLin--;
}
</script>
</head>
<body>
<table id="tabla" border=1>
	<tr>
		<td><select id="sel1">
			<option>1
			<option>2
			<option>3
		</td>
		<td><input type="text" id="t11" value="t11"></td>
		<td><input type="text" id="t12" value="t12"></td>
	</tr>
	<tr>
		<td><select id="sel2">
			<option>1
			<option>2
			<option>3
		</td>
		<td><input type="text" id="t21" value="t21"></td>
		<td><input type="text" id="t22" value="t22"></td>
	</tr>
</table>
<br>
<input type="button" value="Agregar" onclick="agregar()">
<input type="button" value="Borrar ultima" onclick="borrarUltima()">
</body>
</html>
Cabe mencionar que este solo funciona en Internet Explorer.. , pero es bueno
__________________
Escribe tu código de forma que refleje, y saque a relucir,lo mejor de tu carácter personal
www.oscararzola.com/blog
Principios de un programador
  #9 (permalink)  
Antiguo 04/01/2008, 05:13
 
Fecha de Ingreso: diciembre-2007
Mensajes: 9
Antigüedad: 6 años, 9 meses
Puntos: 0
Re: Aumentar filas a una tabla html al dar click

HOLA GENTE...

Muchas gracias a todos, son muy buenas opciones... ahora mismo los pruebo...

Ya les contare como me fue...

Gracias...
  #10 (permalink)  
Antiguo 04/01/2008, 05:21
 
Fecha de Ingreso: diciembre-2007
Mensajes: 9
Antigüedad: 6 años, 9 meses
Puntos: 0
Re: Aumentar filas a una tabla html al dar click

_SSX

Como le hago dentro del script que aumenta, para que los elementos del <SELECT> los saque de la Base de Datos?... porque los elementos no son fijos, pues los saco de la BD...

Gracias de antemano...
  #11 (permalink)  
Antiguo 04/01/2008, 05:25
 
Fecha de Ingreso: enero-2008
Mensajes: 1
Antigüedad: 6 años, 8 meses
Puntos: 0
Re: Aumentar filas a una tabla html al dar click

Hola a todos,

Copie el codigo de _ssx y funcionaba bien, hasta que le meti mano para adaptarlo hi ahora no funciona en explorer, si en firefox. Soy principiante y no se ver donde esta el problema, seguramente es una tonteria, pero es lo que tiene el ser un principiante.

Muchas gracias por anticipado

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
var upload_number=1;
function addFileInput() {
var i=0;
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.setAttribute("width", "100");
td1.setAttribute("align", "center");

var file = document.createElement("input");
file.setAttribute("type", "text");
file.setAttribute("name", "fotografia[]");
file.setAttribute("id", "fotografia[]");
file.setAttribute("size", "12");
file.setAttribute("maxlength", "10");
td1.appendChild(file);

var td2 = document.createElement("td");
td2.setAttribute("width", "200");
td2.setAttribute("align", "center");

var file0 = document.createElement("select");
file0.setAttribute("name", "formato[]");
file0.options[i] = new Option('Digital 3000x2000','Digital 3000x2000');
i++;
file0.options[i] = new Option('Digital 800x533','Digital 800x533');
i++;
file0.options[i] = new Option('Papel 10x15','Papel 10x15');
i++;
file0.options[i] = new Option('Papel 15x22','Papel 15x22');
i++;
file0.options[i] = new Option('Papel 20x30','Papel 20x30');
i++;
file0.options[i] = new Option('Papel 30x40','Papel 30x40');
i++;
file0.options[i] = new Option('Papel 40x60','Papel 40x60');
td2.appendChild(file0);

var td3 = document.createElement("td");
td3.setAttribute("width", "40");
td3.setAttribute("align", "center");

var file2 = document.createElement("input");
file2.setAttribute("type", "text");
file2.setAttribute("name", "ud[]");
file2.setAttribute("id", "ud[]");
file2.setAttribute("size", "3");
file2.setAttribute("maxlength", "2");
td3.appendChild(file2);

tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
document.getElementById("moreUploads").appendChild(tr);
upload_number++;
}
</script>
<title>Pix MotoRR</title>
</head>

<body>
<div align="center"><input type="button" name="button" id="button" value="Crear otra fila" onclick="javascript:addFileInput()"/></div>
<a href="javascript:addFileInput()">Añadir fila</a>
<table border="1" align="center" cellpadding="1" cellspacing="1" id="moreUploads">
<tr>
<td width="100" heigth="100" align="center">N&ordm; Fotografia</td>
<td width="200" heigth="100" align="center">Formato</td>
<td width="40" heigth="100" align="center">Ud</td>
</tr>

<tr>
<td width="100" height="20" align="center"><input name="fotografia[]" type="text" id="fotografia[]" size="12" maxlength="10"/></td>

<td width="200" height="20" align="center"><select name="formato[]" id="formato[]">
<option value="Digital 3000x2000">Digital 3000x2000</option>
<option value="Digital 800x533">Digital 800x533</option>
<option value="Papel 10x15">Papel 10x15</option>
<option value="Papel 15x22">Papel 15x22</option>
<option value="Papel 20x30">Papel 20x30</option>
<option value="Papel 30x40">Papel 30x40</option>
<option value="Papel 40x60">Papel 40x60</option>
</select></td>

<td width="40" height="20" align="center"><input name="ud[]" type="text" id="ud[]" size="3" maxlength="2"/></td>
</tr>

</table>
</body>
</html>
  #12 (permalink)  
Antiguo 04/01/2008, 05:29
 
Fecha de Ingreso: diciembre-2004
Mensajes: 719
Antigüedad: 9 años, 9 meses
Puntos: 2
Re: Aumentar filas a una tabla html al dar click

Yo lo que te recomiendo TOTHELO es que empieces por tomarte unas horas de leer algo de DOM Programming.

En definitiva, "DOM PROGRAMMING" es Javascript. No es dificil, es una tontería de facil, es solo cuestión de incorporar conceptos.

Buscate un tutorial y empeza haciendo cosas sencillas. Vas a acostumbrarte a manejar tu HTML siempre usando ID's y así podrás: Agregar Quitar Modificar elementos HTML de forma dinamica (A esto hace años le decian DHTML también).

Luego vas a necesitar una forma de hacer q los cambios sean permanentes... ahi es a donde necesitas PHP para meter en BD información, tal vez incluso, sobre los elementos HTML de tu sitio. Lo mejor para esto es AJAX y no te dejes enloquecer tampoco... ajax es estupidamente simple y no necesitas un framework para usarlo... leete un buen tutorial también:


Mi recomendación es que hagas una inversión de tiempo. Tomate una semana para estudiar:

- Empeza con XML. Todo lo que es DOM y XHTML tiene absoluta relacion con XML.

- Segui con Javascript (Dom Programming): Lee y hace ejemplos tontos.

- Por último AJAX: Lee las bases, no te dejes marear con estupideces como "web 2.0 la web del futuro y de los millonarios programadores". AJAX es algo simple y existe desde hace AÑOS solo que ahora se le ocurrio a la gente empezar a usarlo.


Aqui estan las guias para EMPEZAR (Luego busca más guias en google!)


XML: http://geneura.ugr.es/~jmerelo/xml/
DOM: http://www.howtocreate.co.uk/tutoria...ript/dombasics
AJAX: http://maborak.com/js/maborak/sample...jax/index.html


Espero te sirva, tenes todo en bandeja.


PD: Y no metas JS en tu HTML !!!!!!!!

Un saludo!
  #13 (permalink)  
Antiguo 24/03/2008, 18:12
 
Fecha de Ingreso: marzo-2008
Mensajes: 1
Antigüedad: 6 años, 6 meses
Puntos: 1
Re: Aumentar filas a una tabla html al dar click

le movi un poquito al codigo que postearon anteriormente para que funcione con IE5 IE5.5 IE6 IE7 y firefox...

ojala les sirva...

Código:
<head>
<script type="text/javascript">
var contLin = 3;
function agregar() {
	var tr, td, tabla;

	tabla = document.getElementById('tabla');
	tr = tabla.insertRow(tabla.rows.length);
	td = tr.insertCell(tr.cells.length);
	td.innerHTML = "<select id='sel" + contLin + "'>" +
	               "<option>1" +
	               "<option>2" +
	               "<option>3";
	td = tr.insertCell(tr.cells.length);
	td.innerHTML = "<input type='text' id='t" + contLin + "1' value='t" + contLin + "1'>";
	td = tr.insertCell(tr.cells.length);
	td.innerHTML = "<input type='text' id='t" + contLin + "2' value='t" + contLin + "2'>";
	contLin++;
}
function borrarUltima() {
	ultima = document.all.tabla.rows.length - 1;
	if(ultima > -1){
		document.all.tabla.deleteRow(ultima);
		contLin--;
	}
}
</script>
</head>
<body>
<form>
<table id="tabla" border="1">
	<tr>
		<td><select name="sel1" id="sel1">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			</select>
		</td>
		<td><input type="text" id="t11" value="t11"></td>
		<td><input type="text" id="t12" value="t12"></td>
	</tr>
	<tr>
		<td><select name="sel2" id="sel2">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			</select>
		</td>
		<td><input type="text" id="t21" value="t21"></td>
		<td><input type="text" id="t22" value="t22"></td>
	</tr>
</table>
<br>
<input type="button" value="Agregar" onclick="agregar()">
<input type="button" value="Borrar ultima" onclick="borrarUltima()">
</form>
</body>
</html>
saludox
  #14 (permalink)  
Antiguo 24/03/2008, 21:17
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.525
Antigüedad: 8 años, 4 meses
Puntos: 2109
Re: Aumentar filas a una tabla html al dar click

Trasladado a JavaScript.
  #15 (permalink)  
Antiguo 25/03/2008, 01:33
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.119
Antigüedad: 12 años, 5 meses
Puntos: 1133
Re: Aumentar filas a una tabla html al dar click

Hola:

Unos apuntes para conseguir mejoras...

En principio no es posible insertar filas con appenchild de un elemento table, deberían insertarse en elementos tbody, thead o tfoot. (No recuerdo si insertRow lo permite en algún navegador, pero siempre hay que considerar que aunque no se declaren, los navegadores insertan automáticamente un tag tbody detrás del table.

Y olvidémonos de una vez por todas de document.all simplemente debe usarse un atributo id (único) y referenciar los elementos con document.getElementById(el_id)... o mejor es crear un "alias":

function tag(id) {return document.getElementById(id);}

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #16 (permalink)  
Antiguo 21/01/2009, 07:33
Avatar de eall  
Fecha de Ingreso: noviembre-2008
Ubicación: Concepcion
Mensajes: 127
Antigüedad: 5 años, 10 meses
Puntos: 8
Respuesta: Aumentar filas a una tabla html al dar click

amigo, acabo de escribir un articulo con el cual puedes agregar filas a una tabla rapida y facilmente mediante xajax y php sin tener que recargar la pagina y sin preocuparse por la compatibilidad del navegador ni saber nada de DOM o JavaScript.

la idea es la misma que te exponen más arriba pero sin la complejidad... creas las etiquetas HTML en jararquía y añades el contenido.

te dejo el enlace para que le heches un vistaso...

Código:
link: 
http://prodev.cl/2009/01/como-agregar-filas-rows-tabla-dinamicamente-mediante-xajax
espero te ayude.

exito.
  #17 (permalink)  
Antiguo 05/02/2010, 08:50
Avatar de Esfinge02  
Fecha de Ingreso: septiembre-2008
Ubicación: Cd. Victoria Tam
Mensajes: 151
Antigüedad: 6 años
Puntos: 2
Pregunta Respuesta: Aumentar filas a una tabla html al dar click

Buenas, quisiera saber si alguien tiene un código que me permita agregar y quitar pero columnas, por decir hago una consulta de 20 campos pero habrá usuarios que si ocupen las 20 columnas y otros que nomas ocupen 2 asi que quisiera saber si abra una variante del código del cual an postilado para ver si me pueden ayudar.

se los gradesere mucho...
__________________
La ignorancia es una bendición o un privilegio, yo lo siento programadores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:22.
SEO by vBSEO 3.3.2