Tablas Dinámicas

guybrusht18 · #1 (**permalink**) 18/08/2010, 14:07

Hola que tal!, soy nuevo en el foro, estuve ojeando un post viejo (http://www.forosdelweb.com/f13/tablas-dinamicas-398327/) que me venia al pelo. El problema que tengo es que, tengo un formulario en el cual en medio de él, tendria que duplicar celdas. Explicandome mejor, hay una opcion para ingresar un dato y luego la fecha correspondiente, pero pueden ser varios datos del mismo tipo, por tal motivo necesito duplicar una fila en la tabla. Para elegir la fecha, utilizo un calendario dinamico en javascript, pero cuando duplico las filas, y quiero elegir la fecha para el segundo dato, por ejemplo, me modifica el primero de todos:

OBJETO |__________| FECHA |________|
OBJETO |__________| FECHA |________| cuando elijo este calendario me modifica el de arriba

y siempre es el primero de todos. Como puedo hacer para modificar el siguiente algoritmo para que detecte el calendario correspondiente

Código:

<html>
<head>
<link type="text/css" rel="stylesheet" href="css/calendario.css"> 

	<link rel="stylesheet" href="calen/css/datepicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="calen/css/layout.css" />
    <title>DatePicker - jQuery plugin</title>
	<script type="text/javascript" src="calen/js/jquery.js"></script>
	<script type="text/javascript" src="calen/js/datepicker.js"></script>
    <script type="text/javascript" src="calen/js/eye.js"></script>
    <script type="text/javascript" src="calen/js/utils.js"></script>
    <script type="text/javascript" src="calen/js/layout.js?ver=1.0.2"></script>

<script type="text/javascript" src="js/funciones_javascript1.js"></script> 	
<script type="text/javascript" src="js/instrumentos.js"></script>

<script type="text/javascript">
function anadir() {
  tab = document.getElementById('tabla');
  fil = document.getElementsByTagName('tr')[0].cloneNode(true);
  tab.appendChild(fil);
}
</script>
</head>

<table>
<tbody id="tabla">
<tr>
<td>
	<div class="blanco"> 
	Fecha:
			<p>
				<input class="inputDate" id="inputDate" value="06/14/2008" />
				<label id="closeOnSelect"><input type="checkbox" /> Close on selection</label>
			</p>
 
	</div>
</td>
</tr>
</tbody>
</table>
<input type="button" value="Añadir" onclick="anadir()" />

</html>

El código que coloqué arriba es un ejemplo que estaba haciendo para luego plasmarlo en el codigo posta, no es justamente el original. Muchas gracias

Saludos!!

Guybrush

cloudandviator · #2 (**permalink**) 19/08/2010, 07:45

Hola, algo parecido llegue a necesitar. Mi solución fue utilizar el jQueryUI http://jqueryui.com/demos/datepicker/ este al ser plugin de jquery permite asignar datepicker por el selector de clase, así que lo único que hago es asignarle una clase en particular a los input que vallan a ser fechas.

$(".myFechas").datepicker();

<input class="myFechas" />
<input class="myFechas" />
<input class="myFechas" />
<input class="myFechas" />
<input class="myFechas" />

guybrusht18 · #3 (**permalink**) 19/08/2010, 08:41

Cita:

Iniciado por cloudandviator

Hola, algo parecido llegue a necesitar. Mi solución fue utilizar el jQueryUI http://jqueryui.com/demos/datepicker/ este al ser plugin de jquery permite asignar datepicker por el selector de clase, así que lo único que hago es asignarle una clase en particular a los input que vallan a ser fechas.

$(".myFechas").datepicker();

<input class="myFechas" />
<input class="myFechas" />
<input class="myFechas" />
<input class="myFechas" />
<input class="myFechas" />

Muchas Gracias!! Soy bastante verde en este lenguaje, estoy aprendiendo a los golpes, y buscando informacion en internet principalmente. Mi pregunta es la siguiente: $(".myFechas").datepicker(); donde deberia ir? perdon si mi pregunta es muy tonta, pero repito jeje, soy medio verde. Te paso el codigo agregado el calender jquery:

Código:

<html>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
	<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.4.custom.css"> 
	
	<script type="text/javascript">
	$(function() {
		$("#datepicker").datepicker(); $(".myFechas").datepicker();
	});
	</script>

	<script type="text/javascript">
	function anadir() {
	  tab = document.getElementById('tabla');
	  fil = document.getElementsByTagName('tr')[0].cloneNode(true);
	  tab.appendChild(fil);
	/* */
	}
	</script>
	
<table>
<tbody id="tabla">
<tr>
<td>
	<div class="demo">
	<p>Fecha: <input  id="datepicker" class="myFechas"></p>
	</div>
</td>
</tr>
</tbody>
</table>
<input type="button" value="Añadir" onclick="anadir()" />
</html>

Mil gracias!!

Guybrush

guybrusht18 · #4 (**permalink**) 19/08/2010, 09:08

Cita:

Iniciado por cloudandviator

Hola, algo parecido llegue a necesitar. Mi solución fue utilizar el jQueryUI http://jqueryui.com/demos/datepicker/ este al ser plugin de jquery permite asignar datepicker por el selector de clase, así que lo único que hago es asignarle una clase en particular a los input que vallan a ser fechas.

$(".myFechas").datepicker();

<input class="myFechas" />
<input class="myFechas" />
<input class="myFechas" />
<input class="myFechas" />
<input class="myFechas" />

Cuando yo hago click en el botón Añadir, agrega un nuevo input para la fecha. Ahi es donde tengo el problema del calendario, es como q pierde el foco. Como me lo planteaste vos, colocando varios input juntos, me funciona bien, pero debería ser dinámico el agregado de dichos input. Si se les ocurre algo, bienvenido sea :)
Muchas gracias de antemano!

Saludos

Guybrush

guybrusht18 · #5 (**permalink**) 20/08/2010, 09:03

Ya lo solucioné, utilizo un código distinto de agregado de filas. Muchas gracias, Saludos

Guybrush