0

quiero agregar una fila a una tabla, pero no sé por qué no funciona, adjunto el script y una imagen de referencia introducir la descripción de la imagen aquí

Esta es la tabla y el botón con el que quiero iniciar la acción

aquí el código

    <div class="tab-pane active" id="venta">
    <h5>Venta</h5>
    <div class="row">
        <div class="col-8" style="padding-top: 4px">
            <table class="table table-bordered table-sm">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">Codigo</th>
                        <th scope="col">Nombre</th>
                        <th scope="col">Precio</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>En esta fila</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="form-group">
                <form class="form-inline" method="POST" action="">
                    <label for="">Codigo</label>
                    <div class="col">
                        <input type="text" class="form-control col-2">
                        <a class="btn btn-dark btn-agregar-producto-venta" href="#">Agregar producto</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

y aquí el script

        <script>
    $(document).ready(function(){
        function agregarAVenta(){
            var html = '<tr>';
            html += '<td><h1>un codigo</h1></td>'
            html += '<td><h1>un nombre</h1></td>'
            html += '<td><h1>un precio</h1></td></tr>'
            $('tbody').append(html);
        }
        $('.btn-agregar-producto-venta').click(function(
            agregarAVenta();
        ));
    });
</script>

la idea principal seria hacer una fila, que inserte un nombre y un precio, pero para efectos de mi duda se puede agregar lo que sea

4
  • 1
    intenta con: $(html).appendTo($("table:eq(0)").find("tbody"));
    – toto
    el 3 ago. 2020 a las 14:39
  • Disculpa, pero mi $(".btn-agregar-producto-venta").on("click", function ( no hace nada, sabes que puede ser? le puse un alert, como flag y tampoco lo hace el 3 ago. 2020 a las 15:00
  • 1
    intenta esto $( "a[class*='btn-agregar-producto-venta']" ).on("click", function(){})
    – toto
    el 3 ago. 2020 a las 15:10
  • el comentario anterior funcionó, probaré ese igualmente, muchas gracias :D el 3 ago. 2020 a las 15:13

2 respuestas 2

0

Prueba en la parte de tu llava script realizar los siguientes cambios

<script>
    /* Ponemos "agregarAVenta" en el ámbito de toda la página */
    function agregarAVenta(){
        var html = '<tr>';
        /* Todas las líneas de código finalizalas como debe ser acorde a la sintaxis de la instrucción */
        html += '<td><h1>un codigo</h1></td>';
        html += '<td><h1>un nombre</h1></td>';
        html += '<td><h1>un precio</h1></td></tr>';
        $('tbody').append(html);
    } // agregarAVenta

    $(document).ready(function(){
        /* Sacar la funcion "agregarAVenta de este ámbito */
        $('.btn-agregar-producto-venta').click(function(
            agregarAVenta();
        ));
    });
</script>
0

Puedes agregar una fila a la tabla dandole un id al body y agregando elementos con javascript quedaria algo asi:

<div class="tab-pane active" id="venta">
<h5>Venta</h5>
<div class="row">
    <div class="col-8" style="padding-top: 4px">
        <table class="table table-bordered table-sm">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Codigo</th>
                    <th scope="col">Nombre</th>
                    <th scope="col">Precio</th>
                </tr>
            </thead>
            <tbody id="table_body">
                <tr>
                    <td>En esta fila</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="row">
    <div class="col">
        <div class="form-group">
            <form class="form-inline" method="POST" action="">
                <label for="">Codigo</label>
                <div class="col">
                    <input type="text" class="form-control col-2">
                    <a class="btn btn-dark btn-agregar-producto-venta" href="#">Agregar producto</a>
                </div>
            </form>
        </div>
    </div>
</div>

y luego por medio de javascript :

 $(document).ready(function(){
    $('.btn-agregar-producto-venta').click(function(
        $('#table_body').append(`
            <tr>
                <td>CODIGO</td>
                <td>NOMBRE</td>
                <td>PRECIO</td>
            </tr>
        `)
    ));
});

Tu Respuesta

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

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