I write this answer with the idea of showing something like a programming paradigm.
If we analyze the variable fila2 that you are generating and try to organize it, we have something like this:
<td class="w3-panel w3-border-bottom w3-border-right w3-border-black">
<center>
<input type="text" name="txt_cantidad" id="txt_cantidad" value="" style="width:100px; text-align:center; autofocus" required="" onkeypress="return valida(event)">
</center>
</td>
<td class="w3-panel w3-border-bottom w3-border-right w3-border-black">
<center>
<input type="text" name="txt_costo_u" id="txt_costo_u" value="" style="width:100px; text-align:center; autofocus" required="" onkeypress="return valida(event)">
</center>
</td>
</tr>
You are creating (I say it with all due respect), a jumble of confusing, erroneous code and riddled with bad practices.
To respond to your approach I propose this code that does the following:
- Create a counter out of context to be able to refer to it always. That counter will be incremented every time you click on add a new row
- In the aggregate function we create variables with the elements. The code is much easier to maintain and understand.
- We will correct the errors, making a clear construction of the elements
- We will correct bad practices , like putting styles directly into the elements. It is better to manage the styles by means of
css . You will see that I have changed the direct styles by class names css in which the desired styles are applied. If this is not possible because you do not have access to create a css , then you can modify the variables cssTr and cssInput
- The id of
input will always be different, since the value of the counter is used to add it to the end of the id.
Nothing else. This is the code. For proof I used the counter to put it as value of the first input . You can remove it in your real scenario.
I hope it will be useful for you and that you can implement a clearer and more organized programming paradigm in the future. It will help you automate the code and understand / analyze it more easily.
var counter = 0;
$(document).ready(function() {
$('#btn_agrega_fila2').click(function() {
counter++;
agregar2();
console.log(counter);
});
});
function agregar2() {
var cssLeft = 'class="w3-panel w3-border-bottom w3-border-left w3-border-black height-30"';
var cssRight = 'w3-panel w3-border-bottom w3-border-right w3-border-black height-30"';
var cssTr = 'class="height-30"';
var cssInput = 'class="input-center"';
var tdRefaccion = '<td ${cssLeft}><input ${cssInput} type="text" name="txt_material_refaccion" id="txt_material_refaccion${counter}" value="${counter}" onkeypress="return valida(event)" autofocus required /></td>';
var tdCantidad = '<td ${cssRight}><input ${cssInput} type="text" name="txt_cantidad" id="txt_cantidad${counter}" value="" autofocus required /></td>';
var tdCosto = '<td ${cssLeft}><input ${cssInput} type="text" name="txt_costo_u" id="txt_costo_u${counter}" value="" onkeypress="return valida(event)" autofocus required /></td>';
var tableRow = '<tr ${cssTr}>${tdRefaccion+tdCantidad+tdCosto}</tr>';
$('#tabla_materiales').append(tableRow);
//reordenar();
}
.input-center {
width: 100px;
text-align: center;
}
.height-30 {
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" name="btn_agrega_fila2" id="btn_agrega_fila2" value="Agregar Fila" style="width: 110px; height: 28px">
<table id="tabla_materiales">
</table>