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

Como multiplicar dois números em JavaScript - O operador de multiplicação da linguagem JavaScript - Exercício Resolvido de JavaScript

Como subtrair dois números em JavaScript - O operador de subtração da linguagem JavaScript - Exercícios Resolvidos de JavaScript

Ler três números inteiros e indicar se eles estão em ordem crescente ou decrescente - Exercícios Resolvidos de JavaScript

Como somar dois números em JavaScript - O operador de adição da linguagem JavaScript - Exercícios Resolvidos de JavaScript

Como testar se uma string está vazia em JavaScript - Exercício Resolvido de JavaScript

Como encontrar o menor valor em um array de inteiros em JavaScript - Exercícios Resolvidos de JavaScript

Como testar se uma variável é do tipo string em JavaScript - Exercício Resolvido de JavaScript

Como testar se o argumento de uma função JavaScript é do tipo String - Exercícios Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Como evitar clique e arraste em suas páginas

Como criar novos elementos HTML usando o método createElement()

Como usar o método apply para herdar as características de um outro objeto

Como transformar em maiúsculas apenas as inicias de cada palavra em uma string JavaScript usando as funções map() e toUpperCase()

Cookies em JavaScript - Como escrever uma função para a criação de cookies em JavaScript

Como gerar um número randômico entre 0 e 10

Como obter a mensagem de um erro de tempo de execução

Como remover elementos duplicados de um array em JavaScript usando as funções filter() e indexOf() do objeto Array

Como usar a diretiva "use strict" do ECMAScript 5 em seus códigos JavaScript

Como somar os elementos de um array em JavaScript usando a função reduce()

Dicas e truques de outras linguagens

PHP - Como obter o tipo de uma imagem usando a função getimagesize() do PHP

C# - Como remover um elemento em uma determinada posição de uma List<T> do C# usando a função RemoveAt()

Java - Como obter um objeto String a partir de um StringBuffer ou StringBuilder do Java

JavaScript - Como calcular Fatorial em JavaScript usando recursão - Como calcular Fatorial usando recursividade - Aprenda a calcular Fatorial usando JavaScript

JavaScript - Como usar o objeto Date em JavaScript - Curso de JavaScript para iniciantes

Delphi - Como usar a propriedade Eof para verificar se estamos no último registro do TClientDataSet do Delphi

PHP - Como usar a função strpos() do PHP para encontrar a posição da primeira ocorrência de uma substring em uma string

PHP - Programação orientada a objetos em PHP - Como usar construtores em suas classes PHP

C - Como usar a Equação de Torricelli para calcular a velocidade da queda livre dada a altura (e a aceleração da gravidade) usando a linguagem C

PHP - Como verificar se uma determinada data é um dia útil usando PHP

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e Fornecedores

Software 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 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

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

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

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

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

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

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

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

Questões de Concurso para Engenharia Civil

Exercícios Resolvidos

Bancos de Dados

Questões de Concurso

Frameworks

Projetos e Códigos Fonte

Especializações

Calculadoras

Ferramentas

Todas as Linguagens, Frameworks, Biliotecas e Bancos de Dados

Compre pelo WhatsApp: +55 (062) 98553-6711

E-Book 650 Dicas e Truques de Python - Com comentários em Português

PDF COM 1.200 PÁGINAS

Apenas R$ 32,90