Como crear linea html

yazo · #1 (**permalink**) 12/01/2008, 11:32

Hola:

Estoy intentando usar un fragmento de código que encontré en una página (ahora no recuerdo cual), es un script que añade o borra campos input según la necesidad del usuario.

El código actual es:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Formularios Dinamicos</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script language="javascript" type="text/javascript">
  // <!--

  // Variable de conteo de "Divs"
  var count = 0;

  // Funcion que agrega una nueva linea
  function addLine(){

    // Se agrega un numero al conteo
    count += 1;

    // Div donde se agregara la nueva linea
    var content = document.getElementById('myDiv');

    // Se crea un nuevo "DIV" que se agregara a content
    var divIdName = 'my' + count + 'Div';
    var newDiv = document.createElement('div');
    newDiv.setAttribute('id', divIdName);

	// Se crea un nuevo "INPUT"
    var newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.size = '10';
    newInput.name = 'myInput[]';

	// Se crea un Link para poder borrar la linea
    var newDelete = document.createElement('a');
    newDelete.href = 'javascript:delLine("' + divIdName + '")';
    newDelete.innerHTML = 'Borrar Linea';

	// Se agrega el "INPUT" y el link al "DIV"
    newDiv.appendChild(newInput);
    newDiv.appendChild(newDelete);
    content.appendChild(newDiv);
  }

  // Se borra la linea solicitada
  function delLine(div){
    var content = document.getElementById('myDiv');
    var remove = document.getElementById(div);
    content.removeChild(remove);
  }

  // -->
  </script>
</head>
<body>

<form method="POST" action="">
  <a href="javascript:addLine();">Añadir Linea +</a><br>
  <div id="myDiv"></div>
  <br><input type="submit">
</form>

</body>
</html>

Actualmente añade un campo de texto y el texto "Borrar linea".

¿Como podría hacer para que se añada la siguiente línea de código?
Es una línea nueva en una tabla.

Código HTML:

<tr>
    <td><input type="text" name="orden" id="orden"></td>
    <td><input type="text" name="concepto" id="concepto"></td>
    <td><input type="text" name="precio" id="precio"></td>
  </tr>

Gracias por vuestra ayuda.

yazo · #2 (**permalink**) 13/01/2008, 03:22

Ya he encontrado la página de donde lo he sacado:
http://www.developarts.com/formularios_dinamicos

JavierB · #3 (**permalink**) 13/01/2008, 03:56

Hola yazo

Prueba este código:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Formularios Dinamicos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var cont = 0;
function addLine() {
  tab = document.getElementById('tabla');
  
  fila = tab.appendChild(document.createElement('tr'));
  celda = fila.appendChild(document.createElement('td'));
  //
  campo = celda.appendChild(document.createElement('input'));
  campo.name='orden'
  campo.id='orden'+cont;
  //
  campo = celda.appendChild(document.createElement('input'));
  campo.name='concepto'
  campo.id='concepto'+cont;
  //
  campo = celda.appendChild(document.createElement('input'));
  campo.name='precio'
  campo.id='precio'+cont;
  //
  campo = document.createElement('input');
  campo.type='button';
  campo.name='orden'
  campo.id='orden'+cont;
  campo.onclick=function() {
    tab = document.getElementById('tabla');
    padre = this.parentNode.parentNode;
    tab.removeChild(padre);
  }
  celda.appendChild(campo);

  cont++;
}

// Se borra la linea solicitada
function delLine(div){
  var content = document.getElementById('myDiv');
  var remove = document.getElementById(div);
  content.removeChild(remove);
}
</script>
</head>
<body>

<form method="POST" action="">
  <a href="#" onclick="addLine();return false">Añadir Linea +</a><br>
  <table>
  <tbody id="tabla">
  </tbody>
  </table>
  <br><input type="submit">
</form>

</body>
</html>

Saludos,

yazo · #4 (**permalink**) 13/01/2008, 06:09

Muchas Gracias JavierB, todo va perfecto.

¿Como podría hacer por ejemplo para dar un ancho del 100% a un td?
¿Se podría hacer?

Muchas Gracias

JavierB · #5 (**permalink**) 13/01/2008, 08:09

Hola de nuevo.

Para dar un ancho del 100% puedes ponerlo así, pero si le pones ese ancho, se supone que sólo va a caber una celda en cada fila.

Código:

celda.style.width = '100%';

Saludos,

yazo · #6 (**permalink**) 14/01/2008, 09:45

Muchas Gracias por tu ayuda JavierB.

yazo · #7 (**permalink**) 23/01/2008, 02:39

Hola a todos de nuevo:

Estoy intentando añadir una fila encima de lo anterior, lo que he hecho ha sido añadir en la tabla que muestra el contenido lo siguiente:

Código HTML:

<table width='100%'>
                  <tbody id='tabla'>
                      <tr>
                        <td width='50' align='center'><strong>Orden</strong></td>
                        <td align='center'><strong>Detalles</strong></td>
                        <td width='50' align='center'><strong>Cantidad</strong></td>
                        <td width='100' align='center'><strong>Tarifa</strong></td>
                        <td width='100' align='center'><strong>Total</strong></td>
                      </tr>
                  </tbody>
                </table>

El problema es que se me pone todo el contenido en la primera columna y lo demás se me descuadra.
¿Como lo podría hacer?

Muchas Gracias

yazo · #8 (**permalink**) 23/01/2008, 08:47

En el anterior mensaje no me he explicado muy bien, lo que quiero hacer es que primero salga esa fila con los nombres de las columnas y respetanto las anchuras, y en las restantes filas que aparezca los inputs al 100% de anchura.

¿Me podeis ayudar?

Os lo agradecería de veras.

yazo · #9 (**permalink**) 23/01/2008, 15:43

Creo que el error por lo que falla y sale todo en la primera columna es porque en el codigo original me pone todo en un mismo td.
¿Como podría hacer para dividir cada input en un td?

Joe estoy bloqueado y nose como seguir.

Necesito ayuda!!!

Muchas Gracias

yazo · #10 (**permalink**) 23/01/2008, 16:09

Creo que ya lo he conseguido:

Código HTML:

<script type="text/javascript">
var cont = 0;
//Función Añadir linea de presupuesto
function addLine(orden, detalles, cantidad, total) {
  tab = document.getElementById('tabla');

  //Añadimos una nueva fila
  fila = tab.appendChild(document.createElement('tr'));
  
  //Input Orden
  celdaorden = fila.appendChild(document.createElement('td'));
  orden = celdaorden.appendChild(document.createElement('input'));
  orden.style.width = '50px';
  orden.name='orden'+cont;
  orden.id='orden'+cont;
  orden.value = orden;
  
  //Input detalles
  celdadetalles = fila.appendChild(document.createElement('td'));
  detalles = celdadetalles.appendChild(document.createElement('input'));
  detalles.style.width = '100%';
  detalles.name='detalles'+cont;
  detalles.id='detalles'+cont;
  detalles.value = detalles;
  
  //Input Cantidad
  celdacantidad = fila.appendChild(document.createElement('td'));
  cantidad = celdacantidad.appendChild(document.createElement('input'));
  cantidad.style.width = '50px';
  cantidad.name='cantidad'+cont;
  cantidad.id='cantidad'+cont;
  cantidad.value = cantidad;
  
  //Input tarifa
  celdatarifa = fila.appendChild(document.createElement('td'));
  tarifa = celdatarifa.appendChild(document.createElement('input'));
  tarifa.style.width = '100px';
  tarifa.name='tarifa'+cont;
  tarifa.id='tarifa'+cont;
  tarifa.value = tarifa;
  
  //Input Total
  celdatotal = fila.appendChild(document.createElement('td'));
  total = celdatotal.appendChild(document.createElement('input'));
  total.style.width = '100px';
  total.name='total'+cont;
  total.id='total'+cont;
  total.value = total;
  
  //Boton Borrar
  celdaborrar = fila.appendChild(document.createElement('td'));
  borrar = celdaborrar.appendChild(document.createElement('input'));
  borrar.type='button';
  borrar.name='orden'+cont;
  borrar.id='orden'+cont;
  borrar.value = 'Borrar';
  borrar.onclick=function() {
    tab = document.getElementById('tabla');
    padre = this.parentNode.parentNode;
    tab.removeChild(padre);
  }

  cont++;
}

// Se borra la linea solicitada
function delLine(div){
  var content = document.getElementById('myDiv');
  var remove = document.getElementById(div);
  content.removeChild(remove);
}
</script>


<a href='#' onclick='addLine(1234, 555, 6666, 7777);return false'>Añadir Linea +</a>

Le he intentado pasar 4 valores a las celdas y ahora me da error y pone en cada input: "[object HTMLInputElement]"
¿Cual puede ser el error?

Gracias