Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

weslley clyton

Tabela dinamica com input na td

Por , em Javascript

Recommended Posts

weslley clyton    0

weslley clyton
Postado

E ai pessoal...

 

mais uma vez to precisando da ajuda de vocês....

 

seguinte, preciso de uma tebla dinamica, isso eu ja sei como faser mais o complicado vem ai, para essa tabela vai ter um botao que adiciona linhas, e dentro dessas linhas ja teram campos input dentro, e a cada vez que eu clicar para adicionar uma linha ela vai vir com esse campo input para o preenchimento dos dados..

 

por exemplo:

 

<table>

 

</table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

M4n0w4r    0

M4n0w4r
Postado

Esse script faz o que você quer e ainda te dá o direito de poder remover uma linha qualquer, isso não é demais ? :D

 

<html>
	<head>
		<script type = "text/javascript">
			Element.prototype.tabelaDinamica = function (valores) {
				var input, tamanhoValores = valores.length, td, tr = document.createElement ("tr");
				
				for (var i = 0; i <= tamanhoValores; i ++) {
					input = document.createElement ("input");
					td = document.createElement ("td");
					
					if (i === tamanhoValores) {
						input.setAttribute ("type", "button");
						input.value = "-";
						
						input.onclick = (function (tr) {
							return function () {
								tr.parentNode.removeChild (tr);
							}
						})(tr)
					}
					else {
						input.setAttribute ("type", "text");
						input.style.border = "1px solid black";
						input.style.padding = "5px";
						input.value = valores[i];
					}
					
					td.style.padding = "5px";
					
					td.appendChild (input);
					tr.appendChild (td);
				}
				
				this.appendChild (tr);
			}
			
			window.onload = function () {
				var valores = new Array (
					"Hoje vai chuvar !",
					"Hoje vai ter calor !",
					"Hoje vai nevar no brasil :P !"
				);
				
				// Insere 100 linhas :D
				for (var i = 0; i <= 10; i ++) {
					document.getElementById ("tabelaDinamica").tabelaDinamica (valores);
				}
			}
		</script>
		
		<style type = "text/css">
			#tabelaDinamica {
				border-collapse: collapse;
			}
		</style>
	</head>
	
	<body>
		<table id = "tabelaDinamica"></table>
	</body>
<html>

O único porém é que ele não adiciona linhas através de um botão, e sim de um array com os valores do input, no meu exemplo eu coloquei 10 linhas com três colunas:

 

var valores = new Array (
	"Hoje vai chuvar !",
	"Hoje vai ter calor !",
	"Hoje vai nevar no brasil :P !"
);

// Insere 10 linhas :D
for (var i = 0; i <= 10; i ++) {
	document.getElementById ("tabelaDinamica").tabelaDinamica (valores);
}

Se você quiser ter 8 colunas com 5 linhas é so fazer isso:

 

var valores = new Array (
	"Oi, eu sou o Goku :D",
	"Oi, eu sou a segunda coluna",
	"Oi, eu sou a terceira coluna",
	"Oi, eu sou a quarta coluna",
	"Oi, eu sou a quinta coluna",
	"Oi, eu sou a sexta coluna",
	"Oi, eu sou a sétima coluna",
	"Oi, eu sou o chapolim colorado :D"
);

// Insere 5 linhas :D
for (var i = 0; i <= 5; i ++) {
	document.getElementById ("tabelaDinamica").tabelaDinamica (valores);
}

Conseque entender a flexibilidade ? Você pode colocar o que quiser, é magnífico :D

 

Hdsduashudsauhsahuas flowwwwwwwwwwwwww manooooooooooooooooooooooooooooo

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito