How to include buttons from another button in Jquery

Asked

Viewed 35 times

1

I have a table whose contents come from a json that consists of a column with a number, one with a name and one with two buttons, changing and deleting the row. When I click the button to create a new line it inserts the number and the name but I can’t get it to insert the buttons.

This is the function I use to create the rows in the table

$(function(){
$(".row").click(function(){

             var Cdgrupo = $("#Cdgrupo").val();
             var Grupo = $("#Grupo").val();
             var Acao = $("#Acao").val();

             var markup = "<tr><td>" + Cdgrupo + "</td><td>" + Grupo + "</td><td>"+ Acao +"</td></tr>";

             $("table tfoot").append(markup);

         }); 
     });
javascript html jquery

  • But what your difficulty there, is not only creating the buttons as you did with the tr and td?

  • So I’m trying like this, creating the tr and td the same way I did the other two but for some reason it’s not going, on the table is just the space reserved for where they should be.

  • In this case, the buttons would be in this variable called Action?

  • This, in the variable Acao

  • Try to catch the element using only $("#Action")

  • What do you mean? I’m still learning Jquery kkk

  • Do you want to get the right element? But when you use $("Action"). val(), you’re taking the value of the element.

  • Oh I get it, I’ll try without using the . val then. The buttons I’m trying to insert are written in html, using <a> and <button> tags, is there a problem?

  • I don’t think so.

Show 4 more comments

1 answer

0


I made an example that you can try to implement. I created a function Increments to increase the values of the código and also instead of using String used literals template to dry up the code:

$(function() {
  var increme = 0;
  
  function Incrementa() {
    return increme++;
  }
  
  $(".row").on("click", function() {
    Incrementa();
    var Cdgrupo = increme;
    var Grupo = `Grupo ${Cdgrupo}`;
    var btnAlt = `<button>Alterar</button>`;
    var btnExc = `<button>Excluir</button>`;

    var markup = `<tr><td> ${Cdgrupo} </td><td> ${Grupo} </td><td> ${btnAlt} </td><td> ${btnExc} </td></tr>`;

    $("table tfoot").append(markup);

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="row">Adicionar</button>

<table>
  <tfoot></tfoot>
</table>

  • Thanks for the help Leandrade! Then, the row was created but in the columns, where the names of the data I wrote (number and name) appear ${Cdgroup} for example. The buttons are like this too.

  • 1

    I gave an adapted here and ended up helping me to solve the problem, now it’s working! Thanks for the help Leandrade!

  • Jewelry Gabriel, cool that solved. You can accept the answer to your question not be pending on the site.

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.