Ir para conteúdo

POWERED BY:

Arquivado

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

lumiere

CreateElement

Por , em Javascript

Recommended Posts

lumiere    0

lumiere
Postado

Olá pessoal,

 

Estou tentando manipular alguns elementos da página, assim:

Preciso inserir uma linha <tr>, só que eu preciso que insira uma linha acima do que já foi inserida, e do jeito que eu fiz ela insere abaixo de uma já criada...

Segue abaixo o código para entenderem melhor, pois acho q naum to conseguindo explicar:

 

 

<script>function NovaLinha() {var table = document.createElement('table');var tr	= document.createElement('tr');var td	= document.createElement('td');var td2   = document.createElement('td');var td3   = document.createElement('td');var td4   = document.createElement('td');var input = document.createElement('input');var input2 = document.createElement('input');var input3 = document.createElement('input');var input4 = document.createElement('input');var texto = document.createTextNode('teste');input.setAttribute('value','campo1');input.setAttribute('type','text');input.onclick=function(){teste(this.value)}input.setAttribute('size','10');input.setSize=3;input.className='button4';input.Class='button4';input2.setAttribute('value','campo2');input2.setAttribute('type','text');input2.setAttribute('size','10');input2.className='gridtext2';input2.Class='gridtext2';input3.setAttribute('value','campo3');input3.setAttribute('type','text');input3.setAttribute('size','14');input3.className='gridtext4';input3.Class='gridtext4';input4.setAttribute('value','campo4');input4.setAttribute('type','text');input4.setAttribute('size','14');input4.className='gridtext4';input4.Class='gridtext4';td.appendChild(input);td2.appendChild(input2);td3.appendChild(input3);td4.appendChild(input4);tr.appendChild(td);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);table.appendChild(table);document.getElementById('tabela').firstChild.appendChild(tr);}function teste(i){	alert("Valor desse campo = " + i);;}</script>    <body><p> </p><table id="tabela"></table>   <input type=button onclick="NovaLinha()" value="Mais Linha"></body> </html>

Please... :unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

Meu ve se da uma ajuda isso ai..

<script>function insere(){	var td = document.createElement('<td>');	td.innerText = document.all.txtTexto.value;	var td1 = document.all.linha.firstChild;		document.all.linha.replaceChild(td, td1)	document.all.linha.insertBefore(td1);			}function mostra(){	alert(document.all.tabela.innerHTML);}</script><table id = "tabela">	<tr id = "linha">		<td id = "coluna" >OIOIOI</td>	</tr></table><input type = "button" value = "insere" onClick = "insere()"><input type = "button" value = "mostra HTML" onClick = "mostra()"><input type = text name = "txtTexto">
ai no caso eu troco pelo primeiro sempre...pega de base pra ver se você consegue algo..beleza

Compartilhar este post

Link para o post
Compartilhar em outros sites

lumiere    0

lumiere
Postado

Vlw Otata!!!

Fiz isso aki:

 

To postanto aki o que eu acrescentei:

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Untitled</title></head><body><style>  .scroll{align: center;color:#FF0000; padding:5px; width:1opx;height:10px; overflow:auto; }</style><script>var i=0;//Acrescentei issofunction NovaLinha() {i++;//Acrescentei issovar table = document.createElement('table');var tr	= document.createElement('tr');var td	= document.createElement('td');var td2   = document.createElement('td');var td3   = document.createElement('td');var td4   = document.createElement('td');var input = document.createElement('input');var input2 = document.createElement('input');var input3 = document.createElement('input');var input4 = document.createElement('input');var texto = document.createTextNode('teste');input.setAttribute('value','campo'+i);input.setAttribute('type','text');input.onclick=function(){teste(this.value)}input.setAttribute('size','10');input.setSize=3;input.className='button4';input.Class='button4';input2.setAttribute('value','campo2');input2.setAttribute('type','text');input2.setAttribute('size','10');input2.className='gridtext2';input2.Class='gridtext2';input3.setAttribute('value','campo3');input3.setAttribute('type','text');input3.setAttribute('size','14');input3.className='gridtext4';input3.Class='gridtext4';input4.setAttribute('value','campo4');input4.setAttribute('type','text');input4.setAttribute('size','14');input4.className='gridtext4';input4.Class='gridtext4';td.appendChild(input);td2.appendChild(input2);td3.appendChild(input3);td4.appendChild(input4);tr.appendChild(td);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.setAttribute('id','at'+i);//Acrescentei issotable.appendChild(table);var teste = document.getElementById('at'+(i-1));//Acrescentei issovar iTL = document.getElementsByTagName("tbody")[0]; //Acrescentei issoiTL.insertBefore(tr, teste); //Acrescentei isso}function teste(i){alert("Valor desse campo = " + i);;}</script>    <body><p> </p>   <input type=button onclick="NovaLinha()" value="Mais Linha">      <div id="scroll">	<table id="tabela">		<tr id="at0"><!---Acrescentei esse ID AKI --->		   <td>teste</td>	   </tr></table></div></body> </html>

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