Você está aqui: JavaScript ::: DOM (Document Object Model) ::: table Element/Object

Como criar um tabela (elemento HTML table) dinamicamente, contendo linhas e colunas

Quantidade de visualizações: 18005 vezes
Em algumas situações nós precisamos criar tabelas dinamicamente. Nesta dica eu mostro como isso pode ser feito. O primeiro passo é criar o elemento HTML table com uma chamada ao método createElement() do objeto document. Em seguida usamos este mesmo método para criar o elemento tbody da tabela. Finalmente usamos os métodos insertRow() do objeto tbody e insertCell() do objeto tr (que representa cada linha da tabela) para criar as linhas e colunas.

Veja o código completo para o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
<title>Estudos JavaScript</title>

<script type="text/javascript">
  function criarTabela(){
    // vamos criar o elemento HTML table
    var tabela = document.createElement("table");
    tabela.border = "1px";
    tabela.cellSpacing = "0px";
    tabela.cellPadding = "3px";

    // vamos criar o corpo da tabela, ou seja, o tbody 
    var corpo = document.createElement("tbody");
    tabela.appendChild(corpo);
    
    // vamos criar três linhas contendo quatro células cada uma
    for(var i = 0; i < 3; i++){
      var linha = corpo.insertRow(-1);
      
      for(var j = 0; j < 4; j++){
         var celula = linha.insertCell(-1);
         celula.innerHTML = "Célula " + i + ", " + j + "";
      }
    }

    // vamos anexar a tabela recém-criada a um elemento div
    var container = document.getElementById("container");
    container.appendChild(tabela);
  }  
</script>

</head>
<body>

<div id="container"></div>

<br>
<button onclick="criarTabela()">Criar tabela dinamicamente</button>

</body>
</html>

Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6.

Link para compartilhar na Internet ou com seus amigos:

JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como adicionar zeros (ou outro caractere) no início de uma string usando o método padStart() da linguagem JavaScript

Quantidade de visualizações: 2843 vezes
Como adicionar zeros (ou outro caractere) no início de uma string usando o método padStart() da linguagem JavaScript

O método padStart(), adicionado ao objeto String no ES2017 (ECMAScript 8) é usado quando queremos preencher o início de uma string com zeros ou qualquer outro caractere até alcançarmos um comprimento determinado.

Veja, por exemplo, como adicionar zeros na frente de uma string para alcançar o tamanho de cinco caracteres:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<script type="text/javascript">
  var valor = 17;
  // vamos mostrar o valor com o tamanho de cinco caracteres
  document.write("O valor é: " + valor.toString().padStart(5, "0"));
</script>

Ao executar o exemplo você verá o valor "00017" ser exibido. Porém, como o método padStart() foi adicionado no ES2017, pode ser que você encontre navegadores que ainda não o suportem. Assim, é sempre uma idéia testar a sua existência. Veja:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<script type="text/javascript">
  if(String.prototype.padStart){
    window.alert("Seu browser já suporta a função padStart().");  
  }
  else{
    window.alert("Seu browser NÃO suporta a função padStart().");  
  }
</script>

Se o navegador não oferecer suporte a este método, você poderá usar um Polyfill, de terceiros ou uma solução que você mesmo poderá desenvolver.


JavaScript ::: Dicas & Truques ::: Data e Hora

Como retornar o dia da semana em JavaScript no formato Domingo, Segunda-feira, Terça-feira, etc

Quantidade de visualizações: 11725 vezes
Nesta dica veremos como retornar o dia da semana de uma data no formato Domingo, Segunda-feira, Terça-feira, etc, em JavaScript. Esta técnica é muito útil quando queremos escrever aplicações envolvendo calendários.

Veja a página HTML completa para o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Data e hora em JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos criar um array com os dias da semana
  var dias_semana = new Array("Domingo", "Segunda-feira",
    "Terça-feira", "Quarta-feira", "Quinta-feira",
    "Sexta-feira", "Sábado");
  
  // agora vamos obter a data de hoje
  var data = new Date();
  
  // agora vamos obter o número do dia da semana
  // começando em 0 para o domingo
  var dia_semana = data.getDay();
  
  // e finalmente mostramos o resultado
  document.write("Dia da semana: " + dias_semana[dia_semana]);
</script>
  
</body>
</html>

Ao executar este código JavaScript nós teremos o seguinte resultado:

Dia da semana: Segunda-feira


JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como converter uma string em um valor de ponto-flutuante em JavaScript usando a função parseFloat()

Quantidade de visualizações: 7767 vezes
Em algumas situações nós precisamos receber uma string informada pelo usuário e convertê-la para um valor real válido. Um valor em JavaScript é o mesmo que um valor com casas decimais, ou seja, um valor de ponto-flutuante.

Esta tarefa pode ser realizada com o auxílio da função parseFloat(). Veja uma página HTML completa demonstrando o seu uso:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Strings em JavaScript</title>
</head>
<body>

<script type="text/javascript">
  var valor1 = "87.32";
  var valor2 = "Arquivo";
  var valor3 = "65,54";
 
  // vamos exibir os resultados
  document.write(parseFloat(valor1) + "<br>");
  document.write(parseFloat(valor2) + "<br>");
  document.write(parseFloat(valor3));
</script>
  
</body>
</html>

Ao executarmos este código JavaScript nós teremos o seguinte resultado:

87.32
NaN
65

Note que apenas a primeira string pôde ser convertida para um valor fracionário com sucesso.


Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Dicas e truques de outras linguagens

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e FornecedoresSoftware de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais
Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesControle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: Delphi
6º lugar: C
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 32 usuários muito felizes estudando em nosso site.