JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<form method="post">
  <input type"text" name="nome" id="nome" placeholder="Nome"/>
  <input type"text" name="preco" id="preco" placeholder="Preço"/>
  <input type"text" name="qtd" id="qtd" placeholder="Quantidade"/>
  <input type="button" value="Inserir na tabela" class="btn"/>
</form>

<table id="Products-table">
   <th>Produto</th>
   <th>preço</th>
   <th>Quantidade</th>
   <th>Ação</th>
   
</table>

<input type="button" value="Finalizar cadastro" class="btn_cad"/>

<div class="vetor"></div>

CSS

table {
    margin-top: 1em;
    margin-bottom: 1em;
    border-collapse: collapse;
    width: 643px;
}

table, th, td {
    border: 1px solid #000;
    text-align: center;
}

.vetor{
  margin-top: 1em;
}

JavaScript

//função que apaga linha a linha
apagar = function(handler) {
    var tr = $(handler).closest('tr');

    tr.fadeOut(400, function(){ 
      tr.remove(); 
    }); 

    return false;
  };
  
  
  //funçao que converte a tabela em JSON
  var converteTabela = function()
        {
            var rows = [];
            $('table tr').each(function(i, n){
                var $row = $(n);
                rows.push({
                    produto: $row.find('td:eq(0)').text(),
                    preco:   $row.find('td:eq(1)').text(),
                    qtd:    $row.find('td:eq(2)').text()
                    
                });
            });
            
            var filtrado = rows.filter(function(item){
            	return item.produto !== "" && item.preco !== "" && item.qtd !=="";
            });
            return JSON.stringify(filtrado);
        };
  
  
 

var add = $(".btn");
var btn = $(".btn_cad");


//Função que adiciona na tabela
add.on("click", function(){
    var nome  = $("#nome").val();
    var preco = $("#preco").val();
    var qtd   = $("#qtd").val();
    
    var newRow = $("<tr>");
    var cols = "";
    
     if(nome =="" && preco =="" && qtd ==""){
          $(".vetor").html("Os campos não podem estar vazio! Por gentileza preencha-os.");
      }else{
          
           cols += "<td contenteditable='true'>"+ nome + "</td>";
    			 cols += "<td contenteditable='true'>"+ preco +"</td>";
    			 cols += "<td contenteditable='true'>"+ qtd +"</td>";
    			 cols += "<td class='actions'>";
   				 cols += "<button class='btn btn-large btn-danger' onclick='apagar(this)' type='button'>Remover</button>";
    			cols += "</td>";


   				 newRow.append(cols);
    			$("#Products-table").append(newRow);
      
      } 
});


//função que mostra ou envia o json convertido
btn.on("click", function(){
	    var nome  = $("#nome").val();
      var preco = $("#preco").val();
      var qtd   = $("#qtd").val();
      
      if(nome =="" && preco =="" && qtd...