I have an inconvenience.
I am trying to dynamically generate a cell with a button with Inputs with a button.
My drawback is that after filling the first row and generate one more I put the one that had already filled but the new empty but:
I capture the content html() and I add the new row, my code is like this:
this is the 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> I hope you can help me, thank you in advance ...
NOTE: I tried with text() and val()