[Resolvido] JavaScript - Exibir logo dentro da Tabela html

[violin101 0]

Caro amigos, saudações.

Tenho uma tabela escrita em JS que funciona corretamente.

 

Minha dúvida:
- como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

Abaixo posto o script:

      document.addEventListener( 'keydown', evt => {
        if (!evt.ctrlKey || evt.key !== 'i' )
          return;// Não é Ctrl+A, portanto interrompemos o script            
          evt.preventDefault();  
          
        //Chama a Função Calcular Qtde X Valor Venda
        calcvda();

        var idProdutos = document.getElementById("idProdutos").value;
        var descricao = document.getElementById("descricao").value;
        var prd_unid = document.getElementById("prd_unid").value;
        var estoque_atual = document.getElementById("estoque_atual").value;

        var qtde = document.getElementById("qtde").value;
        var vlrunit = document.getElementById("vlrunit").value;

        var vlrtotals = document.getElementById("vlrtotal").value;    
        var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2});  
        
        if(validarConsumo(estoque_atual)){    
          //Chama a Modal com Alerta.
          $("#modal_qtdemaior").modal();                 
        } else {
          if(qtde == "" || vlrunit == "" || vlrtotal == ""){
            //Chama a Modal com Alerta.
            $("#modal_quantidade").modal();
          } else {          
          //Monta a Tabela com os Itens                  
            html = "<tr style='font-size:13px;'>";
            html += "<td width='10%' height='10' style='text-align:center;'>"+
                    "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>";
            html += "<td width='47%' height='10'>"+
                    "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+
                    "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+
                    "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>";
            html += "<td width='10%' height='10' style='text-align:center;'>"+
                    "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>";              
            html += "<td width='12%' height='10' style='text-align:right;'>"+
                    "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>";              
            html += "<td width='14%' height='10' style='text-align:right;'>"+
                    "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>";       
            html += "<td width='12%' height='10' style='text-align:center;'>"+
                    "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+
                    "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>";                       
            html += "</tr>";

            $("#tbventas tbody").append(html);

            //Função para Somar os Itens do Lançamento
            somar();      

            $("#idProdutos").val(null);
            $("#descricao").val(null);                  
            $("#prd_unid").val(null);            
            $("#qtde").val(null);
            $("#vlrunit").val(null);            
            $("#vlrtotal").val(null);     
            $("#idProdutos").focus();

            //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento       
            $("#pgSoma").val(null);  
            $("#pgRest").val(null);            
            $("#pgDsct").val(null);  
            $("#pgTroco").val(null);    
            $("#tbpagar tbody").empty();     

          }//Fim do IF-qtde             
        }//Fim do Validar Consumo        
      });//Fim da Função btn-agregar  

 

Grato,

Cesar
 

[Williams Duarte 431]

Para exibir um logo quando a tabela estiver vazia, você pode:

1 - Adicionar uma div com o logo abaixo da tabela:

<table id="tbventas">
  <tbody></tbody>
</table>
<div id="empty-table-logo" style="text-align:center;">
  <img src="caminho/logo.png" alt="Logo empresa">
</div>

2 - Controlar a visibilidade via JavaScript:

// Função para verificar se tabela está vazia
function checkTableEmpty() {
  const tbody = document.querySelector("#tbventas tbody");
  const logo = document.getElementById("empty-table-logo");
  
  if (tbody.children.length === 0) {
    logo.style.display = "block";
  } else {
    logo.style.display = "none";
  }
}

// Chamar após remover ou adicionar itens
$("#tbventas tbody").append(html);
checkTableEmpty();

// Na remoção de item
$('.btn-remove-produto').click(function() {
  $(this).closest('tr').remove();
  checkTableEmpty();
});

Chame checkTableEmpty() sempre que manipular a tabela para atualizar a visibilidade do logo.

[violin101 0]

Caro amigo, Williams.

 

Obrigado, tu és 10... 10... 10... 10... 10... 10... 10... 10... 10... 10... 10... 10... 10... 10...