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: 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 JavaScriptQuantidade 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, etcQuantidade 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# - Como remover um elemento em uma determinada posição de uma List<T> do C# usando a função RemoveAt() |
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 |