Crear una nueva fila de una tabla a traves de un boton/image

TitoGallo · 19 Feb 2008, 18:14 · Solicitar retirada

les voy a dejar el codigo que tengo armado, en si funciona (porque me crea una nueva fila) pero me gustaria arreglar los pequeños detalles para que funcione del todo bien.

De hecho ahora hace un clon de la fila anterior creo e inserta debajo una nueva linea.

si lo prueban... las imagenes saldran con un aspa. la imagen de la derecha es para añadir una nueva fila y la de la izquierda es para borrar la fila.

lo que io pienso es que cuando se crea una nueva fila se crea con los mismos id y name q su antecesora, cosa que no me valdra, ahora no juego contra una base de datos pero a la larga lo tendre que hacer y la hora de insertar no puedo tener campos q se llamen igual xq no sabre dnd insertarlos.

en la funcion "mas" ahy trocito de codigo comentado nada mas empezar, ese es el trocito de codigo que no se donde ponerlo, es mas asi no funciona jejej

mi idea es (bueno lo q me han dicho en el trabajo) q al apretar el boton añadir, me aparezca un pop-up en el q me pida el nombre de la nueva fila y q rellenen los radio-button y q al cerrar el pop-up se cree la nueva fila con los datos q acabo de insertar.

¿no se si me explique bien? si les falla algo avisenme, aqui estare todo el dia

<html>
<head>
<meta name="generator" Content="Microsoft Visual Studio 6.0">
<link rel="stylesheet" href="css/estilo.css" type="text/css">
<script language="javascript" src="include/tipos.js"></script>
<script language="javascript" src="js/comun.js"></script>
<script language="javascript" src="include/funciones.js"></script>
<style>
.fila-entrada
{
    BACKGROUND-COLOR: #ED1C22;
    PADDING-LEFT: 6px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    COLOR: #FFFFFF;
    FONT-FAMILY: 'Franklin Gothic Medium';
    height: 5px;
    TEXT-ALIGN: center; 
}
</style>
<script language="javascript">
function fQuitaSeleccion(elto)
{
	//para reunificar todas las funciones de quitar radio-button
	elto.checked = false;
}
function mas( el ){
	/*
	var x = screen.width/2-200;
	var y = screen.height/2-100;
	var propiedades='height=250,width=600,status=no,toolbar=no,menubar=no,location=no,top=' + y + ',left=' + x;
	// en esta ventana, pido el nombre de la actividad y q rellene tambien el radio-button
	var url = "ventana_datos.asp"
	
	window.open(url, null, propiedades);
	*/
	
	while ( el.parentNode && 'tr' != el.nodeName.toLowerCase() ){
        el = el.parentNode;
    }
    var t = el.parentNode;
    var i = el.rowIndex;
    
    i == t.rows.length ? i = t.rows.length : i = el.rowIndex+1;
    
    var copia = el.cloneNode(true);
    var inputs = copia.getElementsByTagName('input');
    var imgs = copia.getElementsByTagName('img');
    
    for(a=0; a<inputs.length; a++){
		if( inputs[a].type == "text" ){
			inputs[a].value = "Nueva_actividad";
			inputs[a].readonly = false;
		}else{
			inputs[a].value = "";
		}
    }
    for(a=0; a<imgs.length; a++){
		if( imgs[a].id == "borrar" ){
			imgs[a].style.display = '';
		}
    }
	
    el.parentNode.appendChild(copia);
}

function borra( el ){
    while ( el.parentNode && 'tr' != el.nodeName.toLowerCase() ){
         el =el.parentNode;
    }
    var t = el.parentNode;
    var i = t.rows.length;
    var hay = 0;
    
    for(a=0;a<i;a++){
		if (t.rows.item(a).id=='fila'){
			hay++;
		}
    }    
    if(hay == 1) { return false; }
    t.removeChild(el);
}
</script>
</head>
<h1 class="cabecera">DATOS DE RECURSOS SOCIALES</h1>
<body>
<form id="frm" name="frm" method="POST" action="A_identificacionAutonomia.asp">
<table width="88%" border="0" cellspacing="1" cellpadding="1" align="center">
	<tr>
		<td colspan="4">
			<table width="650px" border="0" align="center" cellspacing="0" cellpadding="0">
				<tr>
					<td class="tabla" align="center" width="250px">Actividad</td>
					<td class="tabla" align="center" width="70px">Nunca</td>
					<td class="tabla" align="center" width="70px">Casi nunca</td>
					<td class="tabla" align="center" width="70px">Algunas veces</td>
					<td class="tabla" align="center" width="70px">Siempre</td>
					<td class="tabla" align="center" width="70px"></td>
				</tr>
				<tr>
					<td class="tabla" style="border-bottom: #ed1c22 1px solid;">Acude a los servicios sociales municipales</td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" opcion="serviciossociales" type="radio" id="serviciossociales_1" name="serviciossociales" value="0" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" opcion="serviciossociales" type="radio" id="serviciossociales_2" name="serviciossociales" value="1" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" opcion="serviciossociales" type="radio" id="serviciossociales_3" name="serviciossociales" value="2" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" opcion="serviciossociales" type="radio" id="serviciossociales_4" name="serviciossociales" value="3" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td></td>
				<tr>
					<td class="tabla" style="border-bottom: #ed1c22 1px solid;">Acude a actividades deportivas</td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" opcion="deportivas" type="radio" id="deportivas_1" name="deportivas" value="0" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" opcion="deportivas" type="radio" id="deportivas_2" name="deportivas" value="1" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" opcion="deportivas" type="radio" id="deportivas_3" name="deportivas" value="2" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" opcion="deportivas" type="radio" id="deportivas_4" name="deportivas" value="3" ondblclick="javascript:fQuitaSeleccion(this);"></td>
				</tr>
				<tr>
					<td class="tabla" style="border-bottom: #ed1c22 1px solid;"><input type="text" onClick="this.readonly=false;" onBlur="if(this.value.length<=0){this.focus();alert('No puedes dejar en blanco la descripcion del campo.');};" value="Otras" name="Otras" id="Otras" size="60" style="border:1px solid #FFFFFF; FONT-FAMILY:'Franklin Gothic Medium';FONT-SIZE: 9pt;"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" type="radio" id="otras_1" name="ancho_campo[]" value="0" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" type="radio" id="otras_2" name="ancho_campo[]" value="1" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" type="radio" id="otras_3" name="ancho_campo[]" value="2" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center"><input style="border-bottom: #ed1c22" class="tabla" type="radio" id="otras_4" name="ancho_campo[]" value="3" ondblclick="javascript:fQuitaSeleccion(this);"></td>
					<td class="tabla" align="center">
						[img]images/bt_borrar.png[/img][img]images/bt_anadir.png[/img]
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td></td>
	</tr>
</table>

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

Jugoncan · 19 Feb 2008, 18:24 · Solicitar retirada

Me he perdido :?
Estás hablando de bases de datos, no?

TitoGallo · 19 Feb 2008, 18:37 · Solicitar retirada

ahora como esta el codigo "es como una plantilla".

Porque no ataca a ninguna base de datos y como se ve, esta todo escrito a mano, pero cuando funcione bien, los datos seran sacados a traves de listados desde la bd. Este trocito de codigo es una parte de un formulario q debera rellenar el usuario, y los datos se insertaran en la bd.

esperen q he tenido una :idea: jejej

se supone que cuando haya conexion con la bd, las actividades saldran de una tabla en concreto y se listaran una debajo de la otra y cuando clickeen en la imagen de "añadir nueva fila", se abrira el pop-up, rellenaran los datos y se hara un update, x lo q se grabara la informacion en la tabla, cerrare el pop-up y recargare la pagina, para volver a lanzar el listado y asi saldra la ultima fila que haya insertado.

Bueno esta parte la tengo clara creo yo, pero el problema lo veo ahora al estar jugando sin la bd de datos (luego estara todo hecho en asp contra sql-server), q no se como abrir el pop-up y rellenen la informacion y despues se cree la nueva fila con los datos q acabo de meter en el pop-up

espero no haberles liado aun mas !

TitoGallo · 20 Feb 2008, 17:56 · Solicitar retirada

igual fue dificil mi pregunta... no pasa nada