0

me podrian ayudar indicando si es posible agregar un boton por cada add a mi tabla, y luego este boton me permita eliminar dicha fila en la que esta ubicada.

$('#addprod').click(function () {
       var producto = $('#mo_codigo').val() + '  ' + $('#mo_nombre').val();
       var cantidad = $('#mo_cantidad').val();
       var puni = $('#mo_precio').val();
       var ptot = $('#mo_total').val();
        $('table tbody').append('<tr><td><button id="btonborrar"  type="button" class="btn btn-primary" >borrar</button></td><td>' + producto + '</td><td></td><td>' + cantidad + '</td><td>' + puni + '</td><td>' + ptot + '</td></tr>');
       $("#addModal").modal('hide');

   });

   $('#btonborrar').click(function () {
       alert('YA PUEDE BORRAR');
   });

Primero si se agregan los datos y el boton desde la ventana modal hacia la tabla, el problema es que al usar los eventos del boton borrar no funciona nada, puse ese alert para ver si en algun momento ingreso pero nada.

2 respuestas 2

1

Por cada fila vas a tener un botón para eliminar, por lo tanto, no puedes asignar ID, en su lugar, usa clases. Para este ejemplo quité ID y lo agregué btnborrar en la lista de clases.

También modifiqué la forma en que creas cada fila, en lugar de concatenar, es preferible usar plantillas de texto, que es más legible y te permite incluir saltos de línea y variables/objetos/funciones.

Finalmente, como vas a estar agregando filas y necesitas que el botón se active para cada una, es necesario delegar el evento clic, para que aplique tanto a los botones existentes como a los que se agreguen posteriormente.

$('#addprod').click(function () {
       var producto = $('#mo_codigo').val() + '  ' + $('#mo_nombre').val();
       var cantidad = $('#mo_cantidad').val();
       var puni = $('#mo_precio').val();
       var ptot = $('#mo_total').val();
        $('table tbody').append(`
            <tr>
                <td>${producto}</td>
                <td>${cantidad}</td>
                <td>${puni}</td>
                <td>${ptot}</td>
                <td><button class="btn btn-primary btnborrar">borrar</button></td>
            </tr>`
        );
});

// Delegar evento buscando botones por clase
$(document).on('click', '.btnborrar', function() {
    alert('Ya puede borrar');
    // event está disponible aunque no lo hayas especificado
    // event.target es el elemento en que se hizo clic
    // Borrar buscando la fila a la que pertenece el botón
    $(event.target).closest('tr').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="mo_codigo" placeholder="Código">
<input type="text" id="mo_nombre" placeholder="Nombre">
<input type="text" id="mo_cantidad" placeholder="Cantidad">
<input type="text" id="mo_precio" placeholder="Precio">
<input type="text" id="mo_total" placeholder="Total">
<button id="addprod">Agregar</button>

<table>
<thead>
  <tr>
    <th>Código + Nombre</th>
    <th>Cantidad</th>
    <th>Precio</th>
    <th>Total</th>
    <th>Acciones</th>
  </tr>
</thead>
<tbody>
</tbody>
</table>

0

que tal para agregar un botton uso el siguiente codigo.

 function addToTableInvestigacion(cells) {
    var Codigo = cells[0].innerText;
    var NumeroInvestigacion = cells[2].innerText;
    var Descripcion = cells[3].innerText;
    var fila = $('#tbl-Mercados tbody');

    var html = '';
    html += '<tr>';
    html += '<td>' + Codigo + '</td>';
    html += '<td>' + NumeroInvestigacion + '</td>';
    html += '<td>' + Descripcion + '</td>';
    html += '<td><button type="button" name="removeMarcaTemp" class="btn btn-danger btn-sm " title="Eliminar" onclick="RemoveItemTableInvestigacion(this);"><span class="ti ti-trash"></span></button></td>';
    html += '</tr>';
    $(fila).append(html);
}

ahora para eliminar una fila de la tabla

   function RemoveItemTableInvestigacion(itemId) {
    $(itemId).closest('tr').remove();
}

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.