Product Registration - Create Features

$(document).ready(function () {

    var contador = 0 ;



    //adiciona nova linha

    $("#addLinha").on("click", function () { 

        contador++;
        //ordenar();
        
        var newRow = $("<tr>");
        var cols = "";

        cols += '<td class="contador" >' + contador + '</td>';
        cols += '<td><label text-align="center"><input class="produto" type="text" name="produto' + contador + '"/></label></td>';
        cols += '<td><label text-align="center"><input class="qtd" type="text" name="qtd' + contador + '"/></label></td>';
        cols += '<td><label text-align="center"><input align="center" class="preco" type="text" name="preco' + contador + '"/></label></td>';
        cols += '<td class="col-md-2 total">R$ 0,00</td>';
        cols += '<td><a class="deleteLinha"> Excluir </a></td>';

        newRow.append(cols);
        
        $("#products-table").append(newRow);
    });
    
    //remove linha
    $("#products-table").on("click", "a.deleteLinha", function (event) {

        $(this).closest("tr").remove();

        reordenar();

        //total();
    });

    //chamada da função para calcular o total de cada linha
    $("#products-table").on("blur keyup", 'input[name^="preco"], input[name^="qtd"]', function (event) {
        
        calculateRow($(this).closest("tr"));

        var z = valor_total(); console.log('teste - '+ z );

        //$("#valor_total").val(z) ; 

        $('#valor_total').html("R$ " + (z) );   
        //console.log( z );

    });


}); // FIM JQUERY


// Ordernar linhas

function ordenar() 
{

var num = document.getElementsByClassName('contador') ; //console.log(num.length);

    for(var i = 1; i < num.length ; i++) { 

        num[i].firstChild.nodeValue = i ; //console.log(i);

    }
}

// Reordernar linhas

function reordenar() 
{

var num = document.getElementsByClassName('contador') ;

    for(var i = 0 ; i < num.length ; i++) { 

        num[i].firstChild.nodeValue = i+1 ; //console.log(i);
    }
}

//função para calcular o total de cada linha 

function calculateRow(row) {

    var preco = +row.find('input[name^="preco"]').val();
    var qtd   = +row.find('input[name^="qtd"]').val();

    //2 casas decimais
    var total = (preco * qtd).toFixed(2);

    //substitui ponto por virgula
    total = total.replace(".", ",");

    //a regex abaixo coloca um ponto a esquerda de cada grupo de 3 digitos desde que não seja no inicio do numero
    row.find('.total').html("R$ " + (total).replace(/\B(?=(\d{3})+(?!\d))/g, "."));     

}

function valor_total() {

    var parcial = document.getElementsByClassName('total') ;

    var total = 0 ;

    var parc  = 0 ;

    for(var i = 0; i < parcial.length; i++) {

        parc = parcial[i].firstChild.nodeValue.replace("R$ ", "") ;

        total +=  parseFloat(parc) ; 

        console.log(parc);
    } 

    //substitui ponto por virgula
    //total = total.replace(".", ",");

    return total.toFixed(2) ; 

}

// Aceitar apenas numeros no input
  function somenteNumeros(num) {

        var er = /[^0-9.]/;

        er.lastIndex = 0;

        var campo = num;
        
        if (er.test(campo.value)) {
          campo.value = "";
        }

    }

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><tableid="products-table" class="table table-striped table-bordered table-hover">

    <thead>
      <tr>

        <th class="cabecalho">#</th>
        <th class="cabecalho">Produto</th>
        <th class="cabecalho">Quantidade</th>
        <th class="cabecalho">Valor Unitário</th>
        <th class="cabecalho">Valor Total</th>
        <th class="cabecalho"></th>

      </tr>
    </thead>
    
    <tbody class="row">    </tbody>
    
    <tfoot>

    <tr>

      <td colspan="4" style="text-align: left;">
        <button class="btn btn-info waves-effect w-md waves-light m-b-5"  id="addLinha" type="button">Adicionar Produto</button>
      </td>

      <td>

        <label id="valor_total"><b>
          <!--input type="text" name="valor_total" id="valor_total" value="" --></b></label>
      </td>

      <td>
        
      </td>

    </tr>

  </tfoot>

</table>