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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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