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

Recommended Posts

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:

 

<form>
<table>
  <tr>
     <td>
        <input type="text">
     </td>
  </tr>
</table>

<div><input type="submit"></div>
</form>

cada vez que eu clicar no botao a tabela vai adicionar uma linha ja cpm aquele input...

 

ah e em cada linha tenho que ter a opção de excluir a linha.

 

desde ja agradeço... flws

Compartilhar este post


Link para o post
Compartilhar em outros sites

i aew weslley clyton, tenta algo mais ou menos assim:

var d = document ;
	window.onload = function(){
		d.getElementById( 'firstLink' ).onclick = function(){ removerTr( 1 ) }
	
		d.getElementById( 'add' ).onclick = function(){
			var oTable = d.getElementById( 'tabela' ) ;
			var newTr  = oTable.insertRow( -1 ) ;
			
			newTr.setAttribute( 'id' , 'row' + oTable.rows.length ) ;
			newTr.insertCell(0).appendChild( getLinkExcluir( oTable.rows.length ) ) ;
			newTr.insertCell(1).appendChild( getInput() ) ;
		}
	}
	
	function getLinkExcluir( rowId )
	{
		var oA = d.createElement( 'a' ) ;
		oA.setAttribute( 'href' , '#' ) ;
		oA.innerHTML =  'excluir' ;
		oA.onclick = function(){ removerTr( rowId ) ; }
		return oA ;
	}
	
	function getInput()
	{
		var oInput = d.createElement( 'input' ) ;
		oInput.setAttribute( 'name' , 'inputs[]' ) ;
		return oInput ;
	}
	
	function removerTr( rowId )
	{
		var iRow = d.getElementById( 'row' + rowId ).rowIndex ;
		d.getElementById( 'tabela' ).deleteRow( iRow ) ;
		return false ;
	}
e o html assim:

<form>
	<table id='tabela'>
	  <tr id='row1'>
		<td><a id='firstLink' href='#'>excluir</a></td>
		 <td>
			<input type="text" name='inputs[]'>
		 </td>
	  </tr>
	</table>

	<div><input type="submit"></div>
</form>
<button id='add' type='button'>Adicionar</button>

espero que ajude abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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