1

Hola llevo varios días tratando de resolver este problema, espero puedan ayudarme.

tengo un botón que al hacer clic en el agrega una nueva fila a una tabla.

<input type="button" class="btn" name="btn_agrega_fila2" id="btn_agrega_fila2" value="Agregar Fila" style="width: 110px; height: 28px">

<script>
$(document).ready(function(){
    $('#btn_agrega_fila2').click(function(){
        agregar2();
    });

});

function agregar2(){

    var fila2=`<tr height="30">
            <td width="350px" class="w3-panel w3-border-bottom w3-border-right w3-border-left w3-border-black"><center><input type="text" name="txt_material_refaccion" id="txt_material_refaccion" value="" style="width:100%; text-align:center; autofocus" required></center></td>
            <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>';
    $('#tabla_materiales').append(fila2);
    reordenar();
}

lo que quiero hacer es que cuando el usuario de clic en el botón y se agregue la nueva fila al input txt_material_refaccion se le agregue un valor de un contador, esto para que cada id sea diferente.

espero me comprendan y puedan ayudarme.

3
  • Quieres que vaya agregandose el valor del contador a el id? Ejemplo: txt_material_refaccion1, txt_material_refaccion2, txt_material_refaccion3, etc.. Según las filas que se agreguen el 26 oct. 2018 a las 19:16
  • Exactamente.... el 26 oct. 2018 a las 19:32
  • @AngelRguez. no agregues resuelto a tu titulo; basta con aceptar la respuesta que te ayudo; por favor quita eso
    – user75901
    el 21 nov. 2018 a las 22:31

4 respuestas 4

1

Simplemente agrega una variable como contador y la concatenas al id.

var count = 1;
 function agregar2(){ 

 var fila2='<tr height="30"><td width="350px" class="w3-panel w3-border-bottom w3-border-right w3-border-left w3-border-black"><center><input type="text" name="txt_material_refaccion" id="txt_material_refaccion'+ count++ +'" value="" style="width:100%; text-align:center; autofocus" required></center></td><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>';

 $('#tabla_materiales').append(fila2);
 reordenar(); 
}

Si quieres pasas el contador como parametro eso no varía es como prefieras lo importante es concatenarlo al id y aumentarlo.

1
  • Gracias, tu respuesta me fue de mucha ayuda. el 6 nov. 2018 a las 23:38
0

Definir el nombre de los inputs de esta manera <input type="text" name="txt_costo_u[]"> https://stackoverflow.com/questions/3314567/how-to-get-form-input-array-into-php-array

5
  • todo esta dentro de un form y lo quiero utilizar para agregar los datos a la base de datos el 26 oct. 2018 a las 19:30
  • Entonces podría explicar para que son los id dinámicos cual es su uso ? el 26 oct. 2018 a las 19:40
  • Por que pienso que si dejo todo como esta haora no guardaría los datos, o si lo hará? el 26 oct. 2018 a las 19:45
  • si guardaría los datos recibirías un arreglo de datos, debes definir el nombre de los inputs de esta manera <input type="text" name="txt_costo_u[]"> https://stackoverflow.com/questions/3314567/how-to-get-form-input-array-into-php-array el 26 oct. 2018 a las 20:00
  • 1
    Este no es el modo de usar respuestas de alguien más, lee Cómo responder y coloca el nombre del usuario a su vez explica que hace ese código; es decir traduce la otra respuesta aquí
    – user75901
    el 26 oct. 2018 a las 20:06
0

Escribo esta respuesta con la idea de mostrar algo así como un paradigma de programación.

Si analizamos la variable fila2 que estás generando y tratamos de organizarla, tenemos algo como esto:

    <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>

Estás creando (lo digo con todo respeto), un amasijo de código confuso, erróneo y plagado de malas prácticas.

Para responder a tu planteamiento propongo este código que hace lo siguiente:

  • Crea un contador fuera de todo contexto para poder referirse a él siempre. Ese contador se irá incrementando cada vez que pulsas en agregar una nueva fila
  • En la función de agregado creamos variables con los elementos. El código es mucho más fácil de mantener y de entender.
  • Corregiremos los errores, haciendo una construcción clara de los elementos
  • Corregiremos malas prácticas, como poner estilos directamente en los elementos. Es mejor manejar los estilos por medio de css. Verás que he cambiado los estilos directos por nombres de clases css en las que se aplican los estilos deseados. Si esto no es posible porque no tienes acceso a crear un css, entonces puedes modificar las variables cssTr y cssInput
  • El id de los input será siempre distinto, pues se usa el valor del contador para agregarlo al final del id.

Nada más. Este es el código. Para prueba he usado el contador para ponerlo como value del primer input. Lo puedes quitar en tu escenario real.

Espero te sea de utilidad y que puedas implementar en lo adelante un paradigma de programación más claro y organizado. Te ayudará a automatizar el código y a entenderlo/analizarlo con mayor facilidad.

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>

0

puedes usar los data id , puedes agregar una variable también a cada uno o puedes de la manera mas simple añadir [] al final del name y dentro asignarle el numero Y te aconsejó que configures el estilo desde un css te ahorrarias mucho trabajo. Suerte espero te sirva

1

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.