Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
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..belezaVlw 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>Ai sim...rs FLW!
Eu imagino q seja com insertBefore, mas não sei como faço... Se laguém puder ajudar... :unsure: