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: 18077 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 ::: Matemática e Estatística

JavaScript para matemática - Como obter o maior entre dois ou mais valores numéricos usando a função max() do JavaScript

Quantidade de visualizações: 10859 vezes
A função max() do objeto Math da linguagem JavaScript pode ser usada quando temos dois ou mais valores numéricos e gostaríamos de retornar o maior deles. Note que esta função não aceita um vetor (array) como argumento, ou seja, os valores devem ser fornecidos de forma literal ou passados como variáveis independentes.

Veja o código JavaScript 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>Estudando JavaScript</title>
</head>
<body>

<script type="text/javascript">
  var n1 = 45;
  var n2 = 18;
  var maior = Math.max(n1, n2);
  document.write("O maior número é " + maior);
</script>
 
</body>
</html>

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

O maior número é 43

O retorno do método max() é um objeto Number representando o maior dos valores fornecidos. Se nenhum argumento for informado, o retorno será um objeto Infinity, enquanto um objeto NaN será retornado se algum dos valores fornecidos não for um valor numérico válido.


JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes)

Como filtrar os elementos de um array em JavaScript usando a função filter() - Vetores e matrizes em JavaScript

Quantidade de visualizações: 2439 vezes
O método filter(), adicionado à linguagem JavaScript por meio do ECMAScript 5 (JavaScript 5, ECMAScript 2009, ES5) nos permite criar um novo vetor contendo apenas os elementos que passarem em um determinado teste, que pode ser uma função de usuário personalizada. Esta função é uma função de callback que será chamada uma vez para cada um dos elementos do vetor.

Para melhor entendimento, comece analisando o trecho de código abaixo:

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

<script type="text/javascript">
  function maiorQue10(valor){
    return valor > 10;
  }  

  // vamos criar um vetor de inteiros
  var valores = [2, 6, 32, 9, 3, 21];

  // vamos filtrar o vetor para obter apenas os
  // valores maiores que 10
  var maiores10 = valores.filter(maiorQue10);

  // vamos mostrar o resultado
  window.alert(maiores10);
</script>

Neste código usamos o método filter() para gerar um novo vetor contendo apenas os elementos com valores maiores que 10. Veja que fornecemos uma função como argumento para o método filter() e, dentro dessa função, nós retornamos true ou false para que a filtragem inclua ou não o valor sendo analisado no momento.

Uma função passada para o método filter() pode conter os seguintes argumentos (nessa mesma ordem):

a) O valor do item;
b) O índice do item (opcional);
c) O vetor a partir do qual o método filter() está sendo chamado (opcional).

Veja mais um trecho de código no qual retornamos os elementos de um array maiores que 10 e precedidos de um número par:

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

<script type="text/javascript">
  function maiorQue10PrecPar(valor, indice, vetor){
    // o primeiro elemento não é precedido por
    // outro. Vamos descartá-lo
    if(indice == 0){
      return false;
    }    

    // é precedido por um número par?
    if(vetor[indice - 1] % 2 == 0){
      // é maior que 10?      
      return valor > 10;
    }

    // nenhuma das condições acima?
    return false;
  }  

  // vamos criar um vetor de inteiros
  var valores = [2, 6, 32, 9, 3, 21];

  // vamos filtrar o vetor para obter apenas os
  // valores maiores que 10 e precedidos por um
  // número par
  var maiores10 = valores.filter(maiorQue10PrecPar);

  // vamos mostrar o resultado
  window.alert(maiores10);
</script>

Execute este código e verá que apenas o valor 32 será retornado, pois ele é o único maior que 10 e precedido por um número par.


JavaScript ::: Desafios e Lista de Exercícios Resolvidos ::: JavaScript Básico

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

Quantidade de visualizações: 1494 vezes
Pergunta/Tarefa:

Escreva um programa JavaScript para somar dois números, ou seja, dois valores numéricos inteiros. O usuário deverá informar os dois valores. Para efetuar a leitura dos números você pode usar a função window.prompt() e, para exibir o resultado, use a função window.alert().

Sua saída deverá ser parecida com:

Informe o primeiro número:
7
Informe o segundo número:
3
A soma dos números é:
10
Resposta/Solução:

Veja a resolução comentada deste exercício em JavaScript:

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

<!doctype html>
<html>
<head>
  <title>Exercícios de JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos ler dois números do usuário
  var num1 = Number.parseInt(window.prompt(
    "Informe o primeiro número:"));
  var num2 = Number.parseInt(window.prompt(
    "Informe o segundo número:"));

  // agora vamos somar os dois números
  var soma = num1 + num2;

  // e mostramos o resultado
  window.alert("A soma dos números é: " + soma);  
</script>
  
</body>
</html>



Mais Desafios de Programação e 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: C
6º lugar: Delphi
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á 29 usuários muito felizes estudando em nosso site.