02/01/2008, 17:06
| |||
| |||
| 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... |
|
02/01/2008, 18:19
| ||||
| ||||
| 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 |
|
03/01/2008, 06:03
| |||
| |||
| 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... |
|
03/01/2008, 11:58
| ||||
| ||||
| 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.
__________________ Con Microaplicaciones puedes hacer tu tienda en línea de forma sencilla y rápida, sin costos ocultos y con mucha responsabilidad. |
|
03/01/2008, 12:07
| ||||
| ||||
| Re: Aumentar filas a una tabla html al dar click este codigo lo pones en tu etiqueta HEAD
Código:
El CSS 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);
}
Código:
En el html <style type="text/css">
input {
display: block;
margin-bottom: 2px;
}
button{
float: right;
}
fieldset {
border: 1px solid black;
}
</style>
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>
__________________ Con Microaplicaciones puedes hacer tu tienda en línea de forma sencilla y rápida, sin costos ocultos y con mucha responsabilidad. |
|
03/01/2008, 12:24
| ||||
| ||||
| 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> </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 |
|
03/01/2008, 12:37
| |||
| |||
| 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>
|
|
03/01/2008, 12:54
| ||||
| ||||
| Re: Aumentar filas a una tabla html al dar click Cita: Cabe mencionar que este solo funciona en Internet Explorer..
Iniciado por posman  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>
 , 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 |
|
04/01/2008, 06:21
| |||
| |||
| 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... |
|
04/01/2008, 06:25
| |||
| |||
| 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º 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>
|
|
04/01/2008, 06:29
| |||
| |||
| 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! |
|
24/03/2008, 18:12
| |||
| |||
| 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:
saludox <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>
|
|
25/03/2008, 01:33
| ||||
| ||||
| 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 |
|
21/01/2009, 08:33
| ||||
| ||||
| 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:
espero te ayude.link: http://prodev.cl/2009/01/como-agregar-filas-rows-tabla-dinamicamente-mediante-xajax exito. |
|
05/02/2010, 09:50
| ||||
| ||||
 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 |
