Olá, damos início ao nosso blog, para saber mais sobre o nosso blog leia o sobre nós.
Obrigado 
Então vamos ao que nos interessa!!!
Assunto: Adicionar linhas dinamicamente em uma tabela;
Ferramentas: Editor html;
Tudo começa com o html.
<html>
<head>
<title>Criando linhas dinamicamente em tabelas</title>
</head>
<body>
</body>
</html>
Agora iremos adicionar uma tabela entre as linhas 5 e 6 na nossa página, algo parecido com isso:
<table id='tabela' border='0' width='100%'>
<tr style='background-color:#FBF6F7'>
<td> </td>
<td>Coluna um</td>
<td>Coluna dois</td>
<td>Coluna tres</td>
</tr>
</table>
<br />
A tabela tem uma linha e quatro colunas.
Agora entre as linhas 3 e 4 adicionamos as tags de script com o seguinte código:
<script LANGUAGE="JavaScript">
totals =0;
function adiciona(){
totals++
tbl = document.getElementById("tabela")
var novaLinha = tbl.insertRow(-1);
var novaCelula;
if(totals%2==0) cl = "#F5E9EC";
else cl = "#FBF6F7";
novaCelula = novaLinha.insertCell(0);
novaCelula.style.backgroundColor = cl
novaCelula.innerHTML = "<input type='checkbox' name='chkt' />";
novaCelula = novaLinha.insertCell(1);
novaCelula.align = "left";
novaCelula.style.backgroundColor = cl;
novaCelula.innerHTML = " Linha"+totals+"";
novaCelula = novaLinha.insertCell(2);
novaCelula.align = "left";
novaCelula.style.backgroundColor = cl;
novaCelula.innerHTML = " ops3";
novaCelula = novaLinha.insertCell(3);
novaCelula.align = "left";
novaCelula.style.backgroundColor =cl;
novaCelula.innerHTML = " ops4";
}
Explicando o código:
Agora só falta adicionar um botão chamando a função:
Meu código final ficou assim ;
<html>
<head>
<title>Criando linhas dinamicamente em tabelas</title>
<script LANGUAGE="JavaScript">
totals =0;
function adiciona(){
totals++
tbl = document.getElementById("tabela")
var novaLinha = tbl.insertRow(-1);
var novaCelula;
if(totals%2==0) cl = "#F5E9EC";
else cl = "#FBF6F7";
novaCelula = novaLinha.insertCell(0);
novaCelula.style.backgroundColor = cl
novaCelula.innerHTML = "<input type='checkbox' name='chkt' />";
novaCelula = novaLinha.insertCell(1);
novaCelula.align = "left";
novaCelula.style.backgroundColor = cl;
novaCelula.innerHTML = " Linha"+totals+"";
novaCelula = novaLinha.insertCell(2);
novaCelula.align = "left";
novaCelula.style.backgroundColor = cl;
novaCelula.innerHTML = " ops3";
novaCelula = novaLinha.insertCell(3);
novaCelula.align = "left";
novaCelula.style.backgroundColor =cl;
novaCelula.innerHTML = " ops4";
}
</script>
</head>
<body>
<table id='tabela' border='0' width='100%'>
<tr style='background-color:#FBF6F7'>
<td> </td>
<td>Coluna um</td>
<td>Coluna dois</td>
<td>Coluna tres</td>
</tr>
</table>
<br />
<input type='button' id='incluir' value='incluir' onclick='adiciona()'/>
</body>
</html>
Testado em FF e IE 7.
Bom por hojé é só, agradeço a visita de todos.
Bacharel em Sistemas de Informação pela Unibrasil, trabalha com web desde 2004, atualmente trabalha na No Zebra Network como desenvolvedor Ruby. Também é Administrador do grupo de jQuery Brasil, e colaborador/idealista do site jQueryBrasil.
Muito bom, parabéns
[...] Veja um outro exemplo mais completo aqui [...]
Muito show essa, mas queria tirar uma duvida, quando tento publicar esse script no meu site, ele me da a seguinte mensagem “EXISTE MAIS DE UMA REFERENCIA AO OBJETO NO DOCUMENTO HTML!. Sera que poderiam me ajudar ?
Obrigado
Provavelmente você tem dois elementos com mesmo id
Mt bom. Funcionou muito bem… Como sugestão, voce poderia postar um exemplo sobre como excluir dinamicamente linhas da tabela…
Parabens…
Obrigado, pode deixar, em breve terá um novo post sobre isso.
Excelente dica.
Não estou conseguindo inserir uma combo com os dias da semana.
Coloquei assim e não aceita:
novaCelula = novaLinha.insertCell(2); novaCelula.align = "left"; novaCelula.style.backgroundColor = cl; novaCelula.innerHTML = " Segunda Terça Quarta Quinta Sexta Sábado Domingo ";Alguém saberia me ajudar? Agradeço desde já!
Não apareceu aqui, mas tem os select, option, label, etc. Igual inserimos normalmente no HTML.
Rodrigo esse código é para inserir linhas em tabelas e não em combos.
Para isso você deverá usar um código como este.
option0 = new Option(" Texto do Option ","valor");Obrigado por responder Ruan.
Na verdade, eu queria inserir a combo inteira igual estava na linha anterior, além do checkbox e do textfield.
Acabei conseguindo fazer como mostrei anteriormente, mas retirando os espaços em branco.
Abraço!
Cara,
muito bom!
Parabéns!
Excelente!
Serviu-me muito!
Legal, uma pena que não tenha funcionado no meu firefox, só no chrome.
É para funcionar corretamente, qual o problema indicado pelo firebug?
Obrigada!
inah es linda
olá amigo
otimo post…
mas tenho uma duvida..
estou colocando inputs nas colunas… gostaria de saber como faço para pegar os valores digitados…
fico no aguardo…
Se os inputs estiverem dentro do form ele funcionará normalmente (no submit). Agora, para te responder exatamente como vc deve pegar algo, só vendo como vc fez, pra que e pq.
Olá gostaria de saber como faço pra adicionar os valores de um input dinamicamente. Nesse seu exemplo ele cria input, e se fosse apenas pra pegar o valor do input e adicionando dentro de uma div.
Não entendi.
Já consegui. Baixa o arquivo aí pra vc ver como é. emausmoraes.xpg.com.br/testesweb/addtags.php
Vlw.