Como duplicar la fila de una tabla dinamicamente?

lord_scarl · #1 (**permalink**) 20/01/2012, 18:55

Que tal, como puedo duplicar la ultima fila de una tabla? ... veran tengo el siguiente codigo:

Código:

<table class="table_general_tiempos">
    <tr>
            <td>
              <input name="dia1" type="text"/>   
              <input name="mes1" type="text"/> 
              <input name="anio1" type="text" />  
            </td>
            <td>
              <input name="hora_inicio1" type="text" />
              <input name="minutos_inicio1" type="text" /> 
            </td>
            <td>
              <input name="hora_fin1"  type="text"/>
              <input name="minutos_fin1" type="text"/> 
            </td>
            <td>
              <textarea name="concepto1"></textarea>
            </td>
    </tr>
</table>

Lo que quiero hacer es que por medio de un boton, cada que se presione, se cree en el instante una nueva fila igual a la que ya tengo, claro voy a ocupar q los atributos de "name" cambien de nombre, de modo que la segunda fila tenga por ejemplo "concepto2" para diferenciarla de "concepto1"

Me habian comentado que utilizando HTML DOM podia hacer eso, pero solo he encontrado ejemplos donde los renglones o celdas contienen texto.

De antemano muchas gracias!

emprear · #2 (**permalink**) 20/01/2012, 20:11

Esto esta hecho para generar campos de upload dinámicos, pero para tu caso es lo mismo, tendrías que adaptarlo a una tabla

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
titulo
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var i=0;
function agregar(src){
i++;
src.innerHTML+='<input name="archivo_'+i+'" type="file" id="archivo_'+i+'" value="" size="10" /><br />\n';
}
var it = i;
//]]>
</script>
</head>
<body>
<div id="generado">
<input type="file" size="10" value="" id="archivo_0" name="archivo_0"/><br />
</div>
<p>
<a href="#" onclick="agregar(document.getElementById('generado'));return false;">nuevo item</a>
</p>
</body>
</html>

Saludos

lord_scarl · #3 (**permalink**) 24/01/2012, 18:34

Que tal !!

Muchas Gracias por tu respuesta !! con ese codigo ya pude duplicar las filas! ... el problema que ahora se me presento es que si tengo algun texto escrito y agrego una nueva fila, el texto capturado se borra, se puede evitar esto??

Gracias ! Saludos!

emprear · #4 (**permalink**) 24/01/2012, 20:00

Supongo que si, obteniendo previamente el texto de cada una de las celdas, ponerlos en un array, y volcar los indices del array en la contrucción del innerHTML de la nueva fila, pero pregunto....de que fila? de la original? la tabla tiene una fila visible predeterminada, o más de una....? tienen todas el mismo texto? como ves hay muchos detalles para tener en cuenta para establecer una solución.
Se entiende el planteo?

Saludos

lord_scarl · #5 (**permalink**) 26/01/2012, 16:23

Que tal, creo que si entiendo el planteamiento, antes que nada me podrias aclarar una duda?

Cada que se modifica el arbol de nodos del documento html, se recarga la pagina verdad? (yo crei k solo actualizaba el pedazo que se modificaba, como el AJAX o al menos asi tengo entendido k funciona :P )

Aqui la cuestion seria que la pagina que estoy creando, tendra una "bitacora de actividades". Las tablas que se van creando, almacenan informacion sobre los tiempos invertidos en cierta actividad, entonces puede que capture toda la informacion, pero antes de guardar el formulario se me ocurra agregar una fila mas para anotar un tiempo, y no seria practico que todo se borre, no se si me doy a entender?

Saludos!!!