Insertar campos Dinamicamente

[JuJoGuAl]

Amigos estoy haciendo un sistema donde tengo que registrar varios registros de medicion, la cuestion es que estos registros pueden ser de 1 a 6 renglones (cada renglon con 5 campos)

entonces me preguntaba de que manera puedo crear un formulario:

Código HTML:

<form id="tiempoteform" name="tiempoteform" method="post" action="./index.php?page=medicion_tiempo_te" onSubmit="return  val_tiempo_te(this.id)">
  <div class="form_settings">
        <p><span>Fecha de Medicion:</span>
        <input class="contact" type="text" name="fecha1" id="fecha1" readonly="readonly"/></p>
        <h3>Turno Vespertino 12:00m a 03:00pm </h3>
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="5"><p align="center" class="tabtitulo">Tiempo de entrega</p></td>
            </tr>
          <tr>
            <td><p align="center" class="tabcamp">Nro. Factura</p></td>
            <td><p align="center" class="tabcamp">Montar t&eacute;</p></td>
            <td><p align="center" class="tabcamp">Armado del vaso</p></td>
            <td><p align="center" class="tabcamp">Armado del t&eacute;</p></td>
            <td><p align="center" class="tabcamp">Tiempo total</p></td>
          </tr>
          <tr>
            <td><input type="text" name="tiempotefact1" id="tiempotefact1" onKeyPress="return acceptNum(event)" maxlength="10" size="10" /></td>
            <td><input type="text" name="tiempotemontar1" id="tiempotemontar1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempototal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="10" /></td>
            <td><input type="text" name="tiempotearmadov1" id="tiempotearmadov1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempototal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="10" /></td>
            <td><input type="text" name="tiempotearmadot1" id="tiempotearmadot1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempototal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="10" /></td>
            <td><input name="tiempotetotal1" type="text" id="tiempototal1" readonly="readonly" size="10" /></td>
          </tr>
        </table>
        <h3><input class="submit" type="submit" name="guardar1" value="Registrar"/>
        <input class="submit" name="borrar" type="reset" value="Limpiar Datos"/>
    </h3>
</div>
</form>
 

y pode añadir mas renglones:

Código HTML:

<tr>
            <td><input type="text" name="tiempotefact1" id="tiempotefact1" onKeyPress="return acceptNum(event)" maxlength="10" size="10" /></td>
            <td><input type="text" name="tiempotemontar1" id="tiempotemontar1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempototal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="10" /></td>
            <td><input type="text" name="tiempotearmadov1" id="tiempotearmadov1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempototal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="10" /></td>
            <td><input type="text" name="tiempotearmadot1" id="tiempotearmadot1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempototal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="10" /></td>
            <td><input name="tiempotetotal1" type="text" id="tiempototal1" readonly="readonly" size="10" /></td>
          </tr>
 

con un + o un boton que diga añadir, y que al momento de guardar solo guarde los renglones activos que tengan datos, de verdad nose como hacerlo :S

[Aeon1]

para agregar los campos dinamicamente lo puedes hacer con javascript o jquery y lo de que solo te guarde los campos que esten llenos, solo necesitas hacer una comprobacion de los campos, de todos modos en tu bd vas a tener los campos de los 6 campos, asi que con que permitas valores nulos en la tabla no te debe de dar problemas

[JuJoGuAl]

La pregunta es como creeme e leido bastante en google y no encuentro la forma :s

[JuJoGuAl]

Resolvi mi problema, he aqui el codigo que implemente y use Javascript para ello:

MI tabla HTML:

Código HTML:

<form id="tiempoteform" name="tiempoteform" method="post" action="./index.php?page=medicion_tiempo_te" onSubmit="return  val_tiempo_te(this.id)">   
  <div class="form_settings">
        <h3>Fecha de Medicion</h3>
        <input class="contact" type="text" name="fecha1" id="fecha1" readonly="readonly"/>
    <input type="hidden" name="campos" id="campos" value="1" readonly="readonly" />
        <table border="1" cellpadding="0" cellspacing="0" id="tiempotetabla">
          <tr>
                <td colspan="6"><p align="center" class="tabtitulo">Tiempo de entrega</p></td>
            </tr>
          <tr>
            <td><p align="center" class="tabcamp">Nro. Factura</p></td>
            <td><p align="center" class="tabcamp">Montar t&eacute;</p></td>
            <td><p align="center" class="tabcamp">Armado del vaso</p></td>
            <td><p align="center" class="tabcamp">Armado del t&eacute;</p></td>
            <td><p align="center" class="tabcamp">Tiempo total</p></td>
            <td><p align="center" class="tabcamp">Turno</p></td>
          </tr>
          <tr>
            <td><input type="text" name="tiempotefact1" id="tiempotefact1" onKeyPress="return acceptNum(event)" maxlength="10" size="8" /></td>
            <td><input type="text" name="tiempotemontar1" id="tiempotemontar1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempotetotal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="8" /></td>
            <td><input type="text" name="tiempotearmadov1" id="tiempotearmadov1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempotetotal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="8" /></td>
            <td><input type="text" name="tiempotearmadot1" id="tiempotearmadot1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempotetotal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="8" /></td>
            <td><input name="tiempotetotal1" type="text" id="tiempotetotal1" readonly="readonly" size="8" /></td>
            <td><select name="tiempoteturno">
              <option value="2">Vespertino</option>
              <option value="3">Nocturno</option>
            </select></td>
          </tr>          
    </table>
        <h5 align="right"><a onclick="crear_elemento_te(tiempotetabla,'campos')">Agregar</a> / <a onclick="borrar_elemento_te(tiempotetabla,'campos')">Quitar</a></h5>
        <p><input class="submit" type="submit" name="guardar1" value="Registrar"/>
        <input class="submit" name="borrar" type="reset" value="Limpiar Datos"/></p>           
  </div>
</form>
 

Javascript para Agregar/Borrar filas

Código Javascript:

function crear_elemento_te(obj,hidden)
{
    var num = document.getElementById(hidden).value;    
    if (num<6)
    {
        nuevaFila = document.getElementById('tiempotetabla').insertRow(-1);
        nuevaFila.id=num;
        nuevaCelda=nuevaFila.insertCell(-1);
        nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotefact"+num+"' id='tiempotefact"+num+"' onKeyPress='return acceptNum(event)' maxlength='10'></td>";
        nuevaCelda=nuevaFila.insertCell(-1);
        nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotemontar"+num+"' id='tiempotemontar"+num+"' onKeyUp='mascara(this,\":\",patron2,true)' maxlength='6' onBlur='calcular(\"tiempotemontar"+num+"\",\"tiempotearmadov"+num+"\",\"tiempotearmadot"+num+"\",\"tiempotetotal"+num+"\",this.id)'></td>";
        nuevaCelda=nuevaFila.insertCell(-1);
        nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotearmadov"+num+"' id='tiempotearmadov"+num+"' onKeyUp='mascara(this,\":\",patron2,true)' maxlength='6' onBlur='calcular(\"tiempotemontar"+num+"\",\"tiempotearmadov"+num+"\",\"tiempotearmadot"+num+"\",\"tiempotetotal"+num+"\",this.id)'></td>";
        nuevaCelda=nuevaFila.insertCell(-1);
        nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotearmadot"+num+"' id='tiempotearmadot"+num+"' onKeyUp='mascara(this,\":\",patron2,true)' maxlength='6' onBlur='calcular(\"tiempotemontar"+num+"\",\"tiempotearmadov"+num+"\",\"tiempotearmadot"+num+"\",\"tiempotetotal"+num+"\",this.id)'></td>";
        nuevaCelda=nuevaFila.insertCell(-1);
        nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotetotal"+num+"' id='tiempotetotal"+num+"' readonly='readonly'></td>";
        nuevaCelda=nuevaFila.insertCell(-1);
        nuevaCelda.innerHTML="<td><select name='tiempoteturno'><option value='2'>Vespertino</option><option value='3'>Nocturno</option></select></td>";
        num++;
        document.getElementById(hidden).value=num;
    }
    else
    {
        alert('Solo se pueden a\u00f1adir 6 Registros por dia!');
    }
}
function borrar_elemento_te(obj,hidden)
{
    var num = document.getElementById(hidden).value;    
    if (num>1)
    {
        nuevaFila = document.getElementById('tiempotetabla').deleteRow(-1);
        num--;
        document.getElementById(hidden).value=num;
    }
    else
    {
        alert('No puede Borrar todos los renglones!');
    }
}