Como adiciono filas en una tabla dinámicamente

Un saludo especial desde COLOMBIA

Bueno, tengo un problemita.. deseo adicionar filas en una tabla que a su vez esta dentro de un formulario... estas filas despues deben ser grabadas en la DB....

mejor dicho

- debo recuperar datos de una DB y mostrarlos en una tabla dentro de un formulario
- debo permitir que el usuario adicione o borre filas de la tabla y que estos cambios se reflegen en la DB.

muchas gracias por la ayuda que me puedan prestar.

Hola milsoncardona, bienvenido:

Aunque hay maneras de añadir celdas a una tabla, desde javascript no es posible interactuar con una base de datos...

Creo que sería mejor que usaras el lenguaje con el que te comunicas con tu BD (asp, php,...)

Saludos

Hola Caricatos

gracias por responder...

te comento que trabajo con ASP y la conexion y recuperación de los datos ya la tengo controlada.... pero no he podido encontrar la forma de adicionar o borrar filas a mi formulario( tabla dentro del formulario) dinámicamente.... si tu dices que se puede, te agradecería inmensamente que me regales un ejemplo javascript de como lograrlo.

gracias de nuevo

Hola otra vez:

Ya que lo pides, te pondré un ejemplo:

Me extrañaba que no funcionara en explorer, y es que hay que usar el tag tbody... (en netscape no es necesario.
En el ejemplo se añaden filas con 2 celdas: celda1 y celda2, y el contenido se pone con celdaX.innerHTML = "contenido"

Espero que te sirva

Saludos

muchas gracias Caricatos.... esta de pelos (como diria un Mexicano)...

la probé y funciona como queria, bueno aunque el ejemplo esta para una columna sencilla de una tabla, creo que no tendré inconveniente en acoplar el ejemplo para adicionar en cada columna un campo text o un checkbox o lo que se me ocurra.


ahora Caricatos , si no es mucha molestia, serías tan amable de tirame un ejemplillo igual pero para borrar de una tabla la fila que el usuario desee... ojo... no necesariamente la última.

yo por mi parte partiendo de este ejemplo empezaré a investigar, pero por si no lo logro estoy seguro de tu ayuda es este nuevo problemita

de nuevo gracias y espero que te pueda molestar más adelante, ya que apenás estoy empezando en la programación para la WEB.

Hola, milsoncardona.

Seguro que a caricatos (¡Hola! ) no le molestaría, pero voy a adelantarme:
Ten en cuenta que la primera fila es la 0 (cero)

Saludos,

Un saludo especial desde COLOMBIA

Hola JavierB, como estas?

bueno, seguro que a Caricatos no le incomodará y a mi menos, que te hayas adelantado a la respuesta je je je...

la función es buena, pero tengo otro problemilla

como obtengo el numero de la columna que el usuario quiere borrar?...
( disculpame si es obvio, pero soy nuevon en esto de la programación para la WEB)

de todas maneras JAVIERB muchisimas gracias por la ayuda, ya que funciona como estaba buscando.

y como tu dices lo importante es saber el CORREO de quien tiene el conocimiento... por ello ya estoy anotando el tuyo je je je... no dudes que te molestaré constantemente

Hola otra vez:

Desde luego que no me importa que te ayudara JavierB, incluso mi respuesta iba a ser algo más compleja:

De paso te puse una forma de averiguar esa fila mediante un prompt, en este caso dentro de la misma función restar...
Como habrás visto la forma de borrar de JavierB es más fácil (al menos se escribe menos).

También puedes poner algún botón dentro de la misma celda...

Bueno. si necesitas más ayuda, dilo.

Saludos

Un saludo especial desde COLOMBIA

Hola Caricatos.... encantado de volverte a saludar

muchas gracias por no olvidarte de mi, y como tú creo que la opción que me dió JavierB es mejor (más fácil), porque me parece un poco engorroso poner al usuario a digitar cual fila quiere borrar y así fila por fila.

se me ocurre que lo pueda hacer como se hace en HOTMAIL, un checkbox por fila y que el usuario chequee los que quiere borrar, cuando de click en borrar recorro la tabla desde el primer registros hasta el último y verifico cuales están chequeados y les voy aplicando el harakiri je je, es decir miTabla.deleteRow(num);

para saber cual fue el registro puedo urilizar un contador que me indique que fila estoy recorriendo y etc etc...

pero bueno llegue a un nudo.... como puedo recorrer una tabla desde el primer registro hasta el último con javascript?

me pueden colaborar con este otro problemilla?..... y disculpen tanta molestia.

gracias y espero seguro de sus sugerencias amigos

Hola otra vez:

Creo que voy a adelantarme a JavierB (Hola )...

Siguiendo con el anterior ejemplo, y haciendo unas modificaciones hice esto:

Saludos

Un saludo especial desde COLOMBIA

muchas gracias Caricatos, excelente tu aporte... funciono exactamente como yo quería aunque tenía un pequeñisimo error en la funcion que llamabas en el botón.
<button onclick=sube()>subir</button>
debe quedar
<button onclick=restar()>subir</button>

muchas gracias, creo que con esto quedó solucionado el problema que tenía... pero como soy nuevo en esto te seguire molestando

por el momento creo que podemos cerrar este tema..

gracias de nuevo, no tengo como pagarte a tí y a JavierB por tan valiosa ayuda, de verdad que busque por toda la WEB y ustedes fueron los únicos que me dieron respuesta....

suerte y hasta otra oportunidad

Hola como podria cambiar en vez de un check box por un button o una imagen que le de clik y pueda borrar la fila

Hola ... saben tambien me interesa el cogigo pero tengo este problema al tratar de correrlo

Warning: Unknown: failed to open stream: No such file or directory in Unknown on line 0

Warning: Unknown: Failed opening 'C:\SERVIDOR\WEB\Adicionar filas en una tabla dinámicamente.php' for inclusion (include_path='.;C:\php5\pear') in Unknown on line 0

Que paso...

<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">

function AddRowsToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var cellRight = row.insertCell(0);
cellRight.innerHTML="<input type='text' name='answers[]' id='answers' class='txtBoxStyle3' size='38'><a hre='#' onClick='DeleteRow(this)'> <img src='../Imagen/Examen_gif/del.gif' border='0'></a> <input type='radio' name='cierto' id='cierto'>";
}
function DeleteRow(x)
{
while (x.tagName.toLowerCase() !='tr')
{
if(x.parentElement)
x=x.parentElement;
else if(x.parentNode)
x=x.parentNode;
else
return;
}
var rowNum=x.rowIndex;
while (x.tagName.toLowerCase() !='table')
{
if(x.parentElement)
x=x.parentElement;
else if(x.parentNode)
x=x.parentNode;
else
return;
}
x.deleteRow(rowNum);
}

function RemoveRowFromTable(rowid) {
//alert("sadfs");
var tbl = document.getElementById(iteration);
//var lastRow = tbl.rows.length;
//if (lastRow > 1)
tbl.deleteRow(rowid);
}


function este()
{
for(var y = 0;y < document.forms.formulario.answers.length;y++)
{

document.formulario.answers[y].focus();

}
}
</script>
</head>

<body>
<form name="formulario" method="post" onSubmit="return verificar(this)" action="examen_pregunta_nuevo.php">
<table cellpadding="0" cellspacing="0" align="left" width="304" border="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" align="center" border="0">
<tr class="texforms">
<td align="left">Respuestas:&nbsp;<input name="button" type=button onClick="AddRowsToTable();este();return false;" value="+" class="Buttonforms"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>

<table cellpadding="1" cellspacing="0" width="100%" id="tblSample" border="0">
<tr>
<td>
<input type="text" name="answers[]" id="answers" class="txtBoxStyle3" size="38">
<img src="../Imagen/Examen_gif/del.gif" border="0" >
<input type="radio" name="cierto" id="cierto">
</td>
</tr>
<tr>
<td>
<input type="text" name="answers[]" id="answers" class="txtBoxStyle3" size="38">
<img src="../Imagen/Examen_gif/del.gif" border="0" >
<input type="radio" name="cierto" id="cierto">
</td>
</tr>
</table>

</td>
</tr>
</table>

</form>
</body>
</html>

saludos

Disculpa pero tengo una inquietud

Los campos que se van agregar pertenecen a una tabla

Ejemplo:

CREATE TABLE contabilizacion
(
idcont int NOT NULL AUTO_INCREMENT,
numdoc varchar(5) NOT NULL,
codcuenta varchar(8) NOT NULL,
nitcontab varchar(11) NOT NULL,
indcucontab varchar(2) NOT NULL,
debito double,
credito double,
detacontab text,
vrbase double,
naturaleza char(1),
PRIMARY KEY (idcont),
INDEX (numdoc),
FOREIGN KEY (numdoc) REFERENCES documento(numdoc) ON UPDATE CASCADE ON DELETE CASCADE,
INDEX (codcuenta),
FOREIGN KEY (codcuenta) REFERENCES cuentas(codcuenta) ON UPDATE CASCADE ON DELETE CASCADE
) TYPE = INNODB;



Lo que se desea es ir llenando los campos y amedida que se necesite otro formulario dar clic en el boton agregar formulario para llenar un nuevo registro. Al final dar clic en el boton agregar inserte todos los campos en la tabla.

Por otro lado al dar clic en el boton eliminar borre los formularios deseados.


Espero contar con tu colaboracion:

Disculpa pero tengo una inquietud

Los campos que se van agregar pertenecen a una tabla

Ejemplo:

CREATE TABLE contabilizacion
(
idcont int NOT NULL AUTO_INCREMENT,
numdoc varchar(5) NOT NULL,
codcuenta varchar(8) NOT NULL,
nitcontab varchar(11) NOT NULL,
indcucontab varchar(2) NOT NULL,
debito double,
credito double,
detacontab text,
vrbase double,
naturaleza char(1),
PRIMARY KEY (idcont),
INDEX (numdoc),
FOREIGN KEY (numdoc) REFERENCES documento(numdoc) ON UPDATE CASCADE ON DELETE CASCADE,
INDEX (codcuenta),
FOREIGN KEY (codcuenta) REFERENCES cuentas(codcuenta) ON UPDATE CASCADE ON DELETE CASCADE
) TYPE = INNODB;



Lo que se desea es ir llenando los campos y amedida que se necesite otro formulario dar clic en el boton agregar formulario para llenar un nuevo registro. Al final dar clic en el boton agregar inserte todos los campos en la tabla.

Por otro lado al dar clic en el boton eliminar borre los formularios deseados.


Gracias por tu colaboracion;

Disculpa pero tengo una inquietud

Los campos que se van agregar pertenecen a una tabla

Ejemplo:

CREATE TABLE contabilizacion
(
idcont int NOT NULL AUTO_INCREMENT,
numdoc varchar(5) NOT NULL,
codcuenta varchar(8) NOT NULL,
nitcontab varchar(11) NOT NULL,
indcucontab varchar(2) NOT NULL,
debito double,
credito double,
detacontab text,
vrbase double,
naturaleza char(1),
PRIMARY KEY (idcont),
INDEX (numdoc),
FOREIGN KEY (numdoc) REFERENCES documento(numdoc) ON UPDATE CASCADE ON DELETE CASCADE,
INDEX (codcuenta),
FOREIGN KEY (codcuenta) REFERENCES cuentas(codcuenta) ON UPDATE CASCADE ON DELETE CASCADE
) TYPE = INNODB;



Lo que se desea es ir llenando los campos y amedida que se necesite otro formulario dar clic en el boton agregar formulario para llenar un nuevo registro. Al final dar clic en el boton agregar inserte todos los campos en la tabla.

Por otro lado al dar clic en el boton eliminar borre los formularios deseados.


Gracias por tu colaboracion;

Bueno y como quedo todo esto ???

... me podrias colaborar!!!

hola, disculpa que me meta en tu post, pero tengo un problema igual..

necesito ocultar columnas al undir un boton. tengo este codigo pero me sale error, solo me interesa borrar columnas, filas no..

les agradezco si me peuden ayudar

<html>
<head>
<title>Untitled</title>
<script>
function quitarFila(num,ver) {
if(ver) dis=(document.all) ? 'block' : 'table-row';
else dis='none';
tab=document.getElementById('tabla');
tab.getElementsByTagName('tr')[num].style.display=dis;
}
function quitarColumna(num,ver) {
if(ver) dis=(document.all) ? 'block' : 'table-cell';
else dis='none';
fila=document.getElementById('tabla').getElementsB yTagName('tr');;
for(i in fila)
fila[i].getElementsByTagName('td')[num].style.display=dis;
}
</script>
</head>
<body>
<table id="tabla" border="1">
<tr>
<td>1.1</td><td>1.2</td><td>1.3</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr>
<tr>
<td>3.1</td><td>3.2</td><td>3.3</td>
</tr>
</table>
<input type="button" value="Quitar fila" onClick="quitarFila(1,false)" />
<input type="button" value="Poner fila" onClick="quitarFila(1,true)" />
<br />
<input type="button" value="Quitar columna" onClick="quitarColumna(1,false)" />
<input type="button" value="Poner columna" onClick="quitarColumna(1,true)" />
</body>
</html>

Como podria crear tablas dentro de una celda
usando el ejemplo este
<html>
<head>
<title>
Tablas
</title>
<script language=javaScript1.2>
function restar() {
var miTabla = document.getElementById("cuerpoTabla");
var i = 0;
do
if (miTabla.rows[i].getElementsByTagName("input")[0].checked == true)
miTabla.deleteRow(i);
else
i ++;
while (miTabla.rows.length != i)
}

function suma() {
var miTabla = document.getElementById("cuerpoTabla");
var fila = document.createElement("tr");
var celda1 = document.createElement("td");
var celda2 = document.createElement("td");
celda1.innerHTML = "hola b" + (miTabla.getElementsByTagName("tr").length + 1).toString();
celda2.innerHTML = "hola c" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input type=checkbox>";
fila.appendChild(celda1);
fila.appendChild(celda2);
miTabla.appendChild(fila);
}


</script>
</head>
<body style="color:blue" >
<script>
document.write(document.body.style[0]);
</script>
<table id=unaTabla border=1>
<tbody id=cuerpoTabla>
<tr id=a1>
<td id=b1>hola b1</td>
<td id=c1>hola c1<input type=checkbox></td>
</tr>
<tr id=a2>
<td id=b2>hola b2</td>
<td id=c2>hola c2<input type=checkbox></td>
</tr>
</table>
<button onclick=sube()>subir</button>
<button onclick=suma()>sumar</button>

</body>
</html>

espero sus comentarios
saludos

gracias

oe disculpen pero alguien saber como obtener el texto o contenido de un td
lo que pasa esque al dar click en el enlace de la tercera columna de mi tabla quiero que todo ese texto de esa fila sean enviados a unas cajas de texto
y bueno estoy buscando en la web alguna ayuda pero hasta ahora no la encuentro haber si me pueden ayudar desde ya gracias :D xD .......
mi msn es [email protected] para cualkier ayuda

Hola,

Estoy haciendo algo parecido a esto, crear una tabla que a partir de un botón agregar filas. Bueno al principio mi idea era hacer múltiples filas con un array lo intente pero no me imprime nada, puse una lista menú con números dependiendo del número que indicara imprimiera el número de filas, pero nada y pues me encontré con el codigo de caricatos(el cuarto mensaje), el problemas esta cuando quiero agregar un campo de texto o una lista menú dentro de las celdas como hago para que se repitan este tipo de filas en las demás ya que solo logre ponerlos en la primera fila que esta predefinida. Otra duda se puede almacenar los datos en la BD...?

Un saludos espero puedas ayudarme :D

cuando empeze hacer algo parecico la verdad fueron muchas lineas de codigo y validaciones
ahora con jquery loa cosa es mas entendible y facil

http://hector2c.wordpress.com/2009/0...-en-una-tabla/

http://lineadecodigo.com/jquery/anad...la-con-jquery/

http://code.google.com/p/lineadecodi...ila-tabla.html

esto seria sin usar jquery

http://micodigobeta.com.ar/?p=391