2

me surge un inconveniente.

Estoy tratando de generar dinamicamente con un boton celdas de una tabla con Inputs.

Mi inconveniente, es que despues de haber llenado la primera fila y genero una mas me pone la que ya se habia llenado mas la nueva pero vacias:

Capturo el contenido html() y le agrego la nueva fila, mi codigo es asi:

este es el JS:

    var numero = 0;
function crearfila(){
    //capturar el contenido de la tabla actual
    var contenidoTabla = $("#miBody").html();
    // var valores  = $("#miBody").text();
    // alert(valores);


    //obtener el valor de los campos requeridos
    var contenidoPlano = $("input[name='no_plano_"+numero+"']").val().length;
    var contenidoFecha = $("input[name='fecha_pl_"+numero+"']").val().length;
    //validar que no esten vacios
    if (contenidoPlano > 0 && contenidoFecha > 0) {
        var nuevaFila="";
        //se crea la nueva fila con los inputs adentro
        nuevaFila ="<tr class='gradeA'>";
        nuevaFila +=   "<th ><input size='14' name='no_plano_"+(numero+1)+"' type='text' class='form-control '></th>";
        nuevaFila +=    "<th ><input size='5' name='version_pl_"+(numero+1)+"' type='text' class='form-control '></th>";
        nuevaFila +=    "<th ><input size='14' name='fecha_pl_"+(numero+1)+"' type='date' class='form-control datepicker'></th>";
        nuevaFila +=    "<th ><input size='32' name='descripcion_pl_"+(numero+1)+"' type='text' class='form-control '></th>";
        nuevaFila +=    "<th ><input type='text' name='observacion_pl_"+(numero+1)+"' class='form-control '></th>";
        nuevaFila += "</tr>";

        //se envia en contenido mas la nueva fila
        $("#miBody").html(contenidoTabla+nuevaFila);
        //se aunmente la variable de factor de cambio
        numero = numero + 1;
    }else{
        //en caso de que el uno de los inputs este vacio
        alert('Falta rellenar algun campo');
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- <script src="https://code.jquery.com/jquery-1.12.3.js"></script> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="Jtabla" cellpadding="0" cellspacing="0" border="0" class="display" style="border-collapse:unset; " width="100%">
<thead style=" background-color: #9b9090; color: #fff;">
    <tr class="cabeza" >
        <th >No. Plano</th>
        <th >Version</th>
        <th >Fecha</th>
        <th >Descripcion</th> 
        <th >Observaciones</th>
    </tr>
</thead>
<tbody id="miBody">
    <tr class="gradeA">
       <th ><input size="14" name="no_plano_0" type="text" class="form-control "></th>
       <th ><input size="5" name="version_pl_0" type="text" class="form-control "></th>
       <th ><input size="14" name="fecha_pl_0" type="date" class="form-control datepicker"></th>
       <th ><input size="32" name="descripcion_pl_0" type="text" class="form-control "></th>
       <th ><input type="text" name="observacion_pl_0" class="form-control "></th>
    </tr>
</tbody>
 </tbody>
</table>

<div style="text-align: right;">
    <button type="submit" class="btn btn-success" onclick="crearfila()"><span class='glyphicon glyphicon-plus'></span></button>
</div>
<br><br>

Espero me puedan colaborar, de antemano muchas gracias... NOTA: he intentado con text() y val()

1 respuesta 1

1

No necesitas capturar el HTML. Simplemente agrega la nueva fila con append asi:

var numero = 0;
function crearfila(){    
    //obtener el valor de los campos requeridos
    var contenidoPlano = $("input[name='no_plano_"+numero+"']").val().length;
    var contenidoFecha = $("input[name='fecha_pl_"+numero+"']").val().length;
    //validar que no esten vacios
    if (contenidoPlano > 0 && contenidoFecha > 0) {
        var nuevaFila="";
        //se crea la nueva fila con los inputs adentro
        nuevaFila ="<tr class='gradeA'>";
        nuevaFila +=   "<th ><input size='14' name='no_plano_"+(numero+1)+"' type='text' class='form-control '></th>";
        nuevaFila +=    "<th ><input size='5' name='version_pl_"+(numero+1)+"' type='text' class='form-control '></th>";
        nuevaFila +=    "<th ><input size='14' name='fecha_pl_"+(numero+1)+"' type='date' class='form-control datepicker'></th>";
        nuevaFila +=    "<th ><input size='32' name='descripcion_pl_"+(numero+1)+"' type='text' class='form-control '></th>";
        nuevaFila +=    "<th ><input type='text' name='observacion_pl_"+(numero+1)+"' class='form-control '></th>";
        nuevaFila += "</tr>";

        //se envia en contenido mas la nueva fila
        $("#miBody").append(nuevaFila);
        //se aunmente la variable de factor de cambio
        numero = numero + 1;
    }else{
        //en caso de que el uno de los inputs este vacio
        alert('Falta rellenar algun campo');
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- <script src="https://code.jquery.com/jquery-1.12.3.js"></script> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="Jtabla" cellpadding="0" cellspacing="0" border="0" class="display" style="border-collapse:unset; " width="100%">
<thead style=" background-color: #9b9090; color: #fff;">
    <tr class="cabeza" >
        <th >No. Plano</th>
        <th >Version</th>
        <th >Fecha</th>
        <th >Descripcion</th> 
        <th >Observaciones</th>
    </tr>
</thead>
<tbody id="miBody">
    <tr class="gradeA">
       <th ><input size="14" name="no_plano_0" type="text" class="form-control "></th>
       <th ><input size="5" name="version_pl_0" type="text" class="form-control "></th>
       <th ><input size="14" name="fecha_pl_0" type="date" class="form-control datepicker"></th>
       <th ><input size="32" name="descripcion_pl_0" type="text" class="form-control "></th>
       <th ><input type="text" name="observacion_pl_0" class="form-control "></th>
    </tr>
</tbody>
 </tbody>
</table>

<div style="text-align: right;">
    <button type="submit" class="btn btn-success" onclick="crearfila()"><span class='glyphicon glyphicon-plus'></span></button>
</div>
<br><br>

3
  • 1
    mestro ud como siempre tan preciso, muchas gracias...
    – srJJ
    Commented el 13 ago. 2018 a las 16:52
  • quizas sepas una forma sencilla de capturar todos estos valores que he creado aqui ?
    – srJJ
    Commented el 3 sept. 2018 a las 20:26
  • Quizas sea mejor que hagas otra pregunta.
    – alanfcm
    Commented el 4 sept. 2018 a las 15:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.