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: 17912 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 ::: Set (Conjunto)

Como retornar elementos presentes no primeiro vetor e não presentes no segundo vetor em JavaScript usando o objeto Set

Quantidade de visualizações: 1324 vezes
Este é um código muito interessante de ser feito em JavaScript. Dados dois arrays a e b, temos que retornar os números que estão presentes no primeiro array, mas que não estão presentes no segundo array.

Este código pode ser escrito usando diversas abordagens. Nesta dica mostrarei como resolvê-lo usando um objeto Set, adicionado à linguagem JavaScript na revisão ECMAScript 2015, também chamada de ES6 e ECMAScript 6.

Vamos ao código então:

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

<html>
<head>
  <title>O objeto Set do JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // primeiro vetor
  var a = [4, 8, 1, 23, 65];
  // segundo vetor
  var b = [23, 8, 90, 3, 7];
  // vetor resultante
  var c = [];
  
  // criamos um objeto Set e guardamos nele os
  // elementos do segundo vetor
  var set = new Set();
  for (var i = 0; i < b.length; i++){
    set.add(b[i]);
  }
  
  // agora varremos o primeiro vetor e usamos
  // o método has() do objeto Set para verificar se
  // o valor não está contido nele
  for (var i = 0; i < a.length; i++){
    if(!set.has(a[i])){
      c.push(a[i]);
    }
  }
  
  document.writeln("Primeiro vetor: " + a);
  document.writeln("<br>Segundo vetor: " + b);
  document.writeln("<br>Resultado: " + c);
</script>

</body>
</html>

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

Primeiro vetor: 4, 8, 1, 23, 65
Segundo vetor: 23, 8, 90, 3, 7
Resultado: 4, 1, 65

Note que os valores 4, 1 e 65 estão presentes no primeiro array mas não estão presentes no segundo.


JavaScript ::: Dicas & Truques ::: Tratamento de Erros

Como retornar o rastreio da pilha de um erro de tempo de execução em JavaScript usando a propriedade stack do objeto Error

Quantidade de visualizações: 7132 vezes
A propriedade stack do objeto Error da linguagem JavaScript pode ser usada quando queremos obter mais informações sobre as causas do aparecimento de um erro em tempo de execução. Dessa forma nós conseguimos rastrear o erro até a sua origem.

Veja um trecho de código JavaScript completo 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>Estudos JavaScript</title>
</head>
<body>

<script language="javascript">
  // o trecho de código a seguir vai provocar
  // um erro de tempo de execução em JavaScript
  try{
    // y não foi definido
    var x = y;
  }
  catch(e){
    // mostra a pilha de rastreio do erro
    document.write("Rastreio da pilha: " + e.stack);
  } 
</script>
  
</body>
</html>

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

Rastreio da pilha: ReferenceError: y is not defined at http://localhost/estudos/estudos_js.html:13:13


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

Como retornar o tamanho de uma string em JavaScript usando a propriedade length do objeto String

Quantidade de visualizações: 10358 vezes
Em algumas situações precisamos saber a quantidade de caracteres contidos em uma frase ou texto. Para isso podemos usar a propriedade length do objeto String. Esta propriedade retorna o tamanho da string, ou seja, a quantidade de caracteres contidos na mesma. Veja um 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>
</head>
<body>

<script type="text/javascript">
  // vamos declarar uma string
  var nome = "Osmar";

  // vamos obter a quantidade de caracteres nesta string
  var tam = nome.length;

  // vamos exibir o resultado
  window.alert("A string contém " + tam + " caracteres.");
</script>

</body>
</html>

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


Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil

Formas: Confecção e colocação

As formas e os escoramentos possuem diversos elementos, sobre eles, assinale a alternativa correta.

A) As travessas têm a finalidade de impedir que os painéis se abram por ocasião do lançamento e adensamento do concreto.

B) As cunhas são colocadas abaixo do par de pranchas, servindo para distribuir as tensões nas bases, principalmente na anulação do efeito do puncionamento.

C) O chapuz apoia o painel da laje. São colocados de 50,0 em 50,0 cm. Servem para evitar que o painel deforme por flexão (flecha).

D) Os pontaletes, também chamados de prumos ou pés-direitos, são os elementos de apoio da forma e devem ter diâmetro mínimo de 8,0 cm ou 5,0x7,0 cm.

E) Os painéis são feitos de madeira de pinho, pregadas de cutelo, podendo também ser usados em formato de caibros de 5,0x7,0 cm ou 7,0x7,0 cm.
Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Python

Qual das formas abaixo é usada para criar um SET em Python?

A) valores = set{3, 6, 1, 7, 6, 3}

B) valores = (3, 6, 1, 7, 6, 3)

C) valores = [3, 6, 1, 7, 6, 3]

D) valores = {3, 6, 1, 7, 6, 3}

E) valores = set(3, 6, 1, 7, 6, 3)
Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Ética e Legislação Profissional

Introdução à Ética

Aristóteles viveu entre grandes personalidades, já que foi discípulo de Platão e mestre de Alexandre, O Grande. Suas reflexões giravam em torno da política, da ética e da metafísica, e foram tão importantes que na atualidade influenciam campos científicos diversos, da política à biologia, passando, é claro, pela filosofia.

Considerando essas informações, analise as afirmativas a seguir.

I - Aristóteles foi o primeiro filósofo a elaborar tratados sistemáticos de ética, como a Ética a Nicômaco.

II - Aristóteles investiga o que é a felicidade, e ela deve ser um bem perfeito que se busca por si mesmo, e não como meio para outra coisa.

III - Ele partilhava da ideia de que uma pessoa virtuosa precisa viver numa sociedade regida por Deus, porque a ética não pode desvincular-se da religião.

Está correto apenas o que se afirma em:

A) I e II, apenas.

B) III, apenas.

C) I, apenas.

D) II, apenas.

E) II e III, apenas.
Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais

Sistema domiciliar de abastecimento de água

Se alguém mergulha numa piscina, a água exerce uma pressão sobre o corpo. Da mesma forma, a água exerce uma pressão sobre outros fluidos ou sobre uma superfície. Essa pressão não depende do volume de água contido em determinado recipiente, mas da altura do nível da água.

Assim, ao se dimensionar as tubulações, deve-se considerar as pressões máximas e mínimas que serão suportadas pelas tubulações. Dessa forma, a pressão máxima que a instalação de água fria pode apresentar durante o funcionamento dos aparelhos é:

Selecione a resposta:

A) 0,5mca.

B) 60mca.

C) 20mca.

D) 40mca.

E) 5mca.
Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Python

Qual é a forma correta de se criar funções em Python?

A) defun calcular():

B) def calcular():

C) void calcular():

D) def calcular(){}

E) function calcular():
Verificar Resposta Estudar Cards Todas as Questões

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



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