Fill table with BD data

Question

I have a problem adding an article designation through the code. I have the following:

HTML

<table class="table table-striped table-bordered" id="vendaTabela" width="100%" >
  <thead>
    <tr>
      <th data-class="expand">Cód.</th>
      <th data-hide="phone">Designação</th>
      <th data-hide="phone">Qnt.</th>
      <th data-hide="phone,tablet">Uni.</th>
      <th>Preço</th>
      <th>Desconto</th>
      <th>IVA</th>
      <th>Sub-Total</th>
    </tr>
  </thead>
    <tbody>
     <tr id="tr0">
         <td class="codigo" contenteditable="true" onblur="codArtigo ( )"></td>
         <td class="designacao"  contenteditable="true"></td>
         <td class="quantidade"  contenteditable="true"></td>
         <td class="unidade"  contenteditable="true"></td>
         <td class="preco"  contenteditable="true" onblur="subtotal()"></td>
         <td class="desconto"  contenteditable="true"></td>
         <td class="iva"  contenteditable="true"></td>
         <td class="total"  contenteditable="true"></td>
     </tr>
    </tbody>
</table>

JQUERY

codArtigo = function () {
   var $linhas = $("#vendaTabela tbody > tr");
   $linhas.each(function () {
     var designacao = $(".designacao", this).html();
     console.log($(".designacao", this).html());

     myJSRoutes.controllers.ArtigoController.getArtigobyId($(".codigo", this).html()).ajax({
                success: function (data) {
                    if (data.length > 0) {
                        $.each(data, function (key, value) {
                            $(".designacao", designacao).html(value.designacaoComercial);
                            console.log(value.designacaoComercial);
                            $(".unidade", $(".unidade", this).html()).html(value.unidade.descricao);
                            console.log(value.unidade.descricao);
                        });
                    }
                }
            })
        })
    }

What is happening to me is the following. If I add code '1', the table fills the designation with 'example'. After adding another line and adding another article (code: 2, designation: exemple2), the designation of the two lines is with the name exemple2.

I don’t think I’m recognizing this part:

var designacao = $(".designacao", this).html();

PS: When doing the console.log($(".code", this).html()), if you have entered two articles the output is:

When the first item is inserted: 1

When inserting the second: 1 2

Any suggestions ?

EDIT:

I have another identical problem and as such I decided to edit this question.

//REMOVER LINHAS DA TABELA
    $(document).on('click', '#btnDeleteRow', function(){
        var $linhas = $("#vendaTabela tbody > tr");
        $linhas.each(function () {
           var total = $(".total", this);
            $(".totalBruto").html(ttb-(parseFloat(total.html())));
            console.log(total.html());
        })

I am trying to update the result of an account that is the totalBrut-totalLine. what happens to me is that if I have two or more lines, this is : var total = $(".total", this); doesn’t seem to be working for me. What am I missing? The console.log(total.html()); prints all totals and not the line you load :

PROBLEM SOLVED:

Instead of going through the lines, as I’m using an onclick on the button I went through the button line: var total = $(this).closest('tr').find(".total").text();

Answer 1

I believe that you should be allowing yourself to refer to the variables at random.

Then I re-read the statement of your variables, might solve your problem

codArtigo = function () {
    var $linhas = $("#vendaTabela tbody > tr");
    $linhas.each(function () {
        var designacao = $(".designacao", this);
        var codigo = $(".codigo", this);
        var unidade = $(".unidade", this);

        console.log(designacao.html());     
        myJSRoutes.controllers.ArtigoController.getArtigobyId(codigo.html()).ajax({
            success: function (data) {
                if (data.length > 0) {
                    $.each(data, function (key, value) {
                        designacao.html(value.designacaoComercial);                     
                        unidade.html(value.unidade.descricao);

                        console.log(value.designacaoComercial);
                        console.log(value.unidade.descricao);
                    });
                }
            }
        })
    })
}

P.S: I would like to have posted this as a comment, but because of the Code, I preferred to do it as a response.