Añadir nueva fila al clickar un boton

crujikoki · #1 (**permalink**) 03/02/2008, 06:05

Hola foreros!

Tengo una nueva duda dudosa, pero esta vez creo que algo más compleja...
La cosa es que tengo una tabla de este estilo (más o menos):

Código HTML:

<table>
<tr bgcolor="#bbcaeb">
  <td colspan="1"><input type="submit" value="A&ntilde;adir marca" onclick="addMarker()" /></td>
  <td colspan="1"><input type="submit" value="Borrar marca" onclick="removeMarker()" /></td>
</tr>
<tr>
<td colspan="5"  bgcolor="white">
<!-- mapa de google maps -->
</td>
</tr>
</table>

Lo que quiero es que al pulsar el boton de "añadir marcador" aparezca una nueva fila con sus correspondientes colunas entre la fila de los botones y la del mapa. Dicha fila quiero que contenga varias cosas como selects, botones u algunos campos de texto. En definitiva quiero que la tabla quede más o menos así:

Código HTML:

<table>
<tr bgcolor="#bbcaeb">
  <td colspan="1"><input type="submit" value="A&ntilde;adir marca" onclick="addMarker()" /></td>
  <td colspan="1"><input type="submit" value="Borrar marca" onclick="removeMarker()" /></td>
</tr>
<tr>
<td colspan="5"  bgcolor="white">
Título:<input type="text" value="text1"><br>
Subtítulo:<input type="text" value="text2"><br>
<input type="submit" value="Añadir"><br>
<!-- más cosas alineadas y posicionadas donde toque -->
</td>
</tr>
<tr>
<td colspan="5"  bgcolor="white">
<!-- mapa de google maps -->
</td>
</tr>
</table>

A más a más, como extra, si dicha fila puede aparecer con un efecto de deslizamiento como este menú mucho mejor!

He encontrado ejemplo de como hacer lo que quiero, pero añaden filas y columnas solo con texto y nada más. Como no domino de JS no se como editar los tags de las columnas para poder poner, por ejemplo, colspan="5" o poder alinear los inputs a mi antojo mediante el JS.

Quizás lo que pido es difícil o muy lavorioso, pero si alguna mente privilegiada se lo ocurre como hacerlo me haría un gran favor.

Muchas gracias por adelantado!

Chory · #2 (**permalink**) 03/02/2008, 06:41

Excepto en lo del desplazamiento, acabo de responder a este post
http://www.forosdelweb.com/f18/ver-si-alguien-echa-cable-php-mysql-553983/#post2272857
que te puede ayudar con las filas.

crujikoki · #3 (**permalink**) 03/02/2008, 08:34

Gracias Chory por tu respuesta, y eso es lo que quería más o menos.

He hecho algo a partir del script de la página de JavierB (que por cirto está muy bien explicado todo).
He conseguido lo que pretendía, pero aun me falta el efecto deslizanto, que visto lo visto voy a prescindir de él.

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 
<html> 

<head>

<title>Crear input file</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">

<!--

num=0;

function crear(obj) {

  num++;

  fi = document.getElementById('fiel'); // 1

  contenedor = document.createElement('div'); // 2

  contenedor.id = 'div'+num; // 3

  fi.appendChild(contenedor); // 4

 
  ele = document.createElement('input'); // 5

  ele.type = 'file'; // 6

  ele.name = 'fil'+num; // 6

  contenedor.appendChild(ele); // 7

  

  ele = document.createElement('input'); // 5

  ele.type = 'button'; // 6

  ele.value = 'Borrar'; // 8

  ele.name = 'div'+num; // 8

  ele.onclick = function () {borrar(this.name)} // 9

  contenedor.appendChild(ele); // 7

}

function borrar(obj) {

  fi = document.getElementById('fiel'); // 1 

  fi.removeChild(document.getElementById(obj)); // 10

}

--> 

</script>

</head>

<body>

<center>

<form method="post" action="" id="formu" name="formu">

<table id="tabla" name="tabla">

<tr bgcolor="#bbcaeb">

  <td colspan="1"><input type="button" value="A&ntilde;adir marca" onclick="crear(this)" /></td>

  <td colspan="1"><input type="button" value="Borrar marca" onclick="removeMarker()" /></td>

</tr>

<tr>

<td colspan="5">

<fieldset id="fiel" name="fran">

<input type="text" value="Título"/>

</fieldset>

</td>

</tr>

<tr>

<td colspan="5"  bgcolor="white">

<iframe width="800" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?hl=es&amp;ie=UTF8&amp;z=12&amp;om=0&amp;ll=41.387917,2.169919&amp;output=embed&amp;s=AARTsJrLRXLDvw-sGnbpxTAwfWRgbV_1OQ"></iframe><br/>

</td>

</tr>

</table>

</form>

</center> 

</body>

</html>

Ahora tengo otra dudilla. Como puedo editar el estilo de la división creada con el JS? Quiero que cuando se cree el elemento pueda definir también la alineación, posición,... Lo tengo que hacer con CSS o se puede hacer con el mismo JS?

Gracias de antemano.

Chory · #4 (**permalink**) 08/02/2008, 17:58

Se puede hacer con JS, pero ahora no me acuerdo como es. Creo que era algo como
var element=document.getElementById(iddeseada);
elemento.style.atributo=valor;
pero no estoy seguro.
Tambien me suena algo de attribute.

Bellenger · #5 (**permalink**) 08/02/2008, 18:09

Seria mas faicl crear el estilo y definirlo en atributo class...

crujikoki · #6 (**permalink**) 15/02/2008, 05:48

Hola,
Gracias por reesponder. Si, creo que sería lo más fácil, pero quería evitar tener que definir el estilo. De todas formas creo que lo tendré que hacer así.
Gracias de nuevo.
Saludos.

cmarrero · #7 (**permalink**) 15/02/2008, 08:04

Estube viendo el codigo y queria saber si alguien sabe como hacer lo siguiente...

El codigo de javascript es el que menciona chory EN OTRO POST ni lo toque por lo tanto no lo coloco aqui... lo que coloco es el formulario que quiero que me muestre...

Código HTML:

<table width="900" border='1' bordercolor="F4F4F4">
    <tr id='fila' onMouseOver="this.className = 'even'" onMouseOut="this.className = ''">
      <td width="560" height="29" style='text-align:center'>
        <input name='texto_campo[]' type='text' class='tbox ' style='padding-left:2px;' value='' size='100'> </td>    
      <td style='text-align:center'>
        <p class="style12">
          <label>
            <input type="radio" name="respuestas[]" value="Si" id="respuestas[]0" />
            Si</label>
          <label>
            <input type="radio" name="respuestas[]" value="No" id="respuestas[]_1" />
            No</label></p> </td>
      <td width="33" ><center><img src='../../../../imagenes/delete.jpg' alt="BORRAR FILA" style='border:none' title='Eliminar Campo' onclick='borra(this);'></center></td>
      <td width="34" ><center><img src='../../../../imagenes/sumar.jpg' alt="AGREGAR FILA" style='border:none' title='Añadir otro Campo' onclick='mas(this);'></center></td>
    </tr>  
  </table>

Como veran quiero poner un multiplechois de dos opciones, el problema es que al agregar una fila mas y querer seleccionar una de las dos opciones me saca la opcion que seleccione en la fila de arriba...

O sea no puedo seleccionar una opcion por fila, si no solo una opcion entre todas las filas que agregue...

Como hago para poder solucionar ese problema...

Gracias Saludos

caricatos · #8 (**permalink**) 15/02/2008, 08:57

Hola:

Los radios solo admiten uno checked... para selecciones múltiples es mejor usar los checkbox (con la misma forma)...

Saludos

cmarrero · #9 (**permalink**) 15/02/2008, 09:04

el tema es el siguiente, yo quiero que por fila seleccionen uno, no quiero hacer multiples selecciones...

Entiendo lo que me decis, el tema es que cada fila que se agrega, se agrega un imput tipo text y el imput tipo radio, pero al duplicarse me duplica el nombre tambien y debido a eso no puedo seleccionar solo uno por fila...

como puedo hacer para cambiarles el nombre por fila, para que al seleccionarlo quede seleccionado solo uno por fila, obviamente siguiente el codigo que postee arriba...

gracias por constetar

crujikoki · #10 (**permalink**) 19/02/2008, 06:33

Con la descripción que das del problema lo entiendo a medias...
Puedes poner el código entero con el JS incluido?