0

tengo una tabla y con jquery y js se agregan td de ser necesarios para la tabla ya que es una especie de factura que llena el usuario, requiero que cuando se agrega la otra td imprima en la td el boton que le dara click para mostrar la modal y cargar otros gastos que requiera llenar en la plantilla

 <script type="text/javascript">
    $(document).ready(function(){
       
        $("#add").click(function(){
            // Obtenemos el numero de filas (td) que tiene la primera columna
            // (tr) del id "tabla"
            var tds=$("#tabla tr:last td").length;
            
            var trs=$("#tabla tr").length;
            var nuevaFila="<tr>";
            for(var i=0;i<tds;i++){
                
                nuevaFila+="<td> </td>";
                
            }
           
            
            nuevaFila+="</tr>";
            $("#tabla").append(nuevaFila);
        });
 
       
        $("#del").click(function(){
           
            var trs=$("#tabla tr").length;
            if(trs>1)
            {
               
                $("#tabla tr:last").remove();
            }
        });
    });
    </script>
<div class="panel-body">
                <div class="table-responsive">
                    <table id="tabla" class="table table-bordered table-hover"  >
                        <thead>
                            <tr>
                                <th>ID Gasto</th>
                                <th>Descripción </th>
                                <th>Monto General</th>
                                <th >Opciones</th>
                            </tr>
                        </thead>
                    
 <tbody id="tbody">
                        <?php
  
 require_once('./conexion.php');
  $sql = "SELECT * FROM gasto_g";
  $res = mysqli_query($conexion,$sql);
  while($resultado = mysqli_fetch_array($res)){
                            ?>   
 


 

        
                            <tr>
                                <td><?php echo $resultado['id_gasto_g']; ?></td>
                                <td><?php echo $resultado['descripcion']; ?></td>
                                <td><?php echo $resultado['monto']; ?></td>
                                <td>
                                    <button type="button"
                                    data-id=<?php echo $resultado['id_gasto_g']; ?>
                                    data-descripcion= <?php echo $resultado['descripcion']; ?>
                                    data-monto=<?php echo $resultado['monto']; ?>
                                   
                                   
                                    data-toggle='modal' data-target="#registro" class='btn btn-primary btn-sm'>
                                                                              <i class="fa fa-pencil"></i>
                                    </button>
                                </td>

                            </tr>

1
  • Has intentado agregar el botón antes de insertar el cierre de etiqueta de tr aquí nuevaFila+="</tr>"; ? Commented el 23 ago. 2017 a las 3:18

1 respuesta 1

0

Te recomendaría separar el código php del html. Edite lo menos posible tu código, espero esto te sirva, saludos.

        $(document).ready(function () {

            $("#add").click(function () {
                // Obtenemos el numero de columnas (td) que tiene la primera fila (tr)
                var tds = $("#tabla tr:last td").length;
                var trs = $("#tabla tr").length;
                var nuevaFila = "<tr>";

                for (var i = 0; i < tds; i++) {
                    nuevaFila += "<td> </td>";
                }

                nuevaFila += "</tr>";

                /* Aqui toca obtener los datos de tu nuevo boton antes de agregarlos*/
                let miHermosoNuevoBoton = '<button type="button">Click Me!</button>';
                let miHermosaNuevaFila = $.parseHTML(nuevaFila);
                $(miHermosaNuevaFila).find("td:last-child").append(miHermosoNuevoBoton);
                $("#tabla").append(miHermosaNuevaFila);
            });


            $("#del").click(function () {

                var trs = $("#tabla tr").length;
                if (trs > 1) {

                    $("#tabla tr:last").remove();
                }
            });
        });
 table, th, td {
        border: 1px solid black;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <a href="javascript:void(0)" id="add">Agregar</a>
    <table id="tabla" class="table table-bordered table-hover" style="border:2px">
        <thead>
            <tr>
                <th>ID Gasto</th>
                <th>Descripción </th>
                <th>Monto General</th>
                <th>Opciones</th>
            </tr>
        </thead>

        <tbody id="tbody">
            <tr>
                <td>id_gasto_g</td>
                <td>descripcion</td>
                <td>descripcion</td>
                <td>
                    <button type="button" data-id='' data-descripcion='' data-monto='' data-toggle='modal' data-target="#registro" class='btn btn-primary btn-sm'>
                                                                                  <i class="fa fa-pencil">x</i>
                    </button>
                </td>

            </tr>
        </tbody>
    </table>

4
  • Gracias me ayudo a resolver, pero ¿Cómo se le pondría un data-target al nuevo boton del td que apunte a la modal? Commented el 24 ago. 2017 a las 0:03
  • cuya modal tiene como id es "registro" Commented el 24 ago. 2017 a las 0:13
  • Pueda ser 1) desde la string let miHermosoNuevoBoton = '<button data-target="registro" type="button">Click Me!</button>';... 2) con jquery $(miHermosoNuevoBoton ).data('target ','registro');... 3) con puro javascript $(miHermosoNuevoBoton).dataset.target = 'registro'
    – Malcam
    Commented el 24 ago. 2017 a las 3:49
  • La probe de las 3 formas pero no muestran la modal (<div class="modal fade" id="registro">) let miHermosoNuevoBoton = '<button data-target="registro" type="button">Click Me!</button>'; let miHermosaNuevaFila = $.parseHTML(nuevaFila); $(miHermosaNuevaFila).find("td:last-child").append(miHermosoNuevoBoton); $("#tabla").append(miHermosaNuevaFila); probe añadiendo data-toogle pero nada Commented el 24 ago. 2017 a las 18:03

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.