Você está aqui: JavaScript ::: DOM (Document Object Model) ::: table Element/Object |
Como criar um tabela (elemento HTML table) dinamicamente, contendo linhas e colunasQuantidade 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 SetQuantidade 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 ErrorQuantidade 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 StringQuantidade 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 |
GNU Octave - Como calcular a derivada de uma função usando a função diff() do GNU Octave - Regra do Tombo (ou Regra da Potência) |
Códigos Fonte |
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 |