add a Javascript button

Question

add a Javascript button

Navigation

#1 by (0 votes)

0

I have a table and with jquery and js td are added to be necessary for the table as it is a kind of invoice that fills the user, I require that when you add the other td print on the td the button that will click to show the modal and load other expenses that you need to fill in the template

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

javascript html php

asked by Anderson Rey 23.08.2017 в 04:57

source

1 answer

How do I insert a default or null value in Mysql? migration error Paperclip in rails

score 0 · Accepted Answer

I would recommend separating the php code from the html. Edit your code as little as possible, I hope this serves you, greetings.

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