1

<!DOCTYPE html>
<html>
<head>
	<title>Tabela dinamica</title>
	<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
	<form action="" class="tabela">

		<label id="etiqueta" for="nome">Nome</label>
		<input required  type="text" name="nome" placeholder="Digite seu nome">

		<label for="idade">Idade</label>
		<input required type="number" name="idade" placeholder="Digite sua idade">

		<label for="cidade" >Cidade</label>
		<input required type="text" name="cidade" placeholder="Digite a sua cidade">

		<button id="adicionar_dados">Adicionar Linha</button>

	</form>
	<div class="alerta"></div>

	<hr>

	<table border="2px solid" >
		<thead>
			<tr class="tabela" ">
				<td>Nome</td>
				<td>Idade</td>
				<td>Cidade</td>
			</tr>
		</thead>

		<tbody >
			
		</tbody>

			<hr>
	</table>

	<script type="text/javascript" src="js/js.js"></script>
</body>
</html>

//variaveis
var botao_adicionar = document.querySelector("#adicionar_dados");
var campo_idade = document.querySelector("input[name='idade']");
var campo_nome = document.querySelector("input[name='nome']");
var campo_cidade=document.querySelector("input[name='cidade']");

var corpo_tabela = document.querySelector("tbody");

var contTab=0;
//funcoes
function TabelaDinamica(nome,idade,cidade){

		this.nome=nome;
		this.idade=idade;
		this.cidade=cidade;


		this.mostrar_dados=function() 
		{
		console.log(" nome é"+this.nome+
			"a idade é"+this.idade+
			"e a cidade é "+this.cidade)
        }

this.criar_linha_tabela = function()
{

		var linha = document.createElement("tr");
		var campo_nome = document.createElement("td");
		var campo_idade = document.createElement("td");
		var campo_cidade = document.createElement("td");

		var inputNome = document.createElement("textarea");
		var inputIdade = document.createElement("textarea");
		var inputCidade = document.createElement("textarea");


		var texto_nome = document.createTextNode(this.nome);
		var texto_idade = document.createTextNode(this.idade);
		var texto_cidade = document.createTextNode(this.cidade);


		inputNome.appendChild(texto_nome);
		inputIdade.appendChild(texto_idade);
		inputCidade.appendChild(texto_cidade);

		campo_cidade.appendChild(inputCidade);
		campo_idade.appendChild(inputIdade);
		campo_nome.appendChild(inputNome);

		var botao_editar = document.createElement("input");
		botao_editar.setAttribute('type','submit');
		botao_editar.setAttribute('value','editar');

		var botao_excluir = document.createElement("input");
		botao_excluir.setAttribute('type','submit');
		botao_excluir.setAttribute('value','excluir');	
		
		linha.appendChild(campo_nome);
		linha.appendChild(campo_idade);
        linha.appendChild(campo_cidade);
        linha.appendChild(botao_editar);
        linha.appendChild(botao_excluir);

        corpo_tabela.appendChild(linha);


        botao_excluir.addEventListener('click',excluir_dados);

        function excluir_dados(event) {
        	event.preventDefault();
        	

        	for(var element in corpo_tabela.children)
        		console.log();
        }; 
    }

  };

function adicionar_dados(event){

	event.preventDefault();

	nova_tabelaDinamica = new TabelaDinamica(campo_nome.value,campo_idade.value,campo_cidade.value);

	nova_tabelaDinamica.criar_linha_tabela();

	nova_tabelaDinamica.mostrar_dados();
	

};

botao_adicionar.addEventListener('click',adicionar_dados);

consigo criar a tabela mais preciso colocar dois botões um para excluir e outro para editar mais não tenho a minima ideia de como fazer isso .

2
  • Recomendo que veja esses vídeos do Rodrigo Branas ele explica tudo o que tu quer fazer mais umas coisas usando o AngularJS
    – Costamilam
    14/11/2017 às 12:31
  • O que o botão "Editar" tem que fazer ao clicar nele?
    – Sam
    14/11/2017 às 12:50

1 Resposta 1

0

Solução

Seguindo as suas instruções, os inputs quando criados devem ser atribuidos disabled como atributo, para serem retirados pela função de editar.

O código das funções ficaria assim:

 botao_excluir.addEventListener('click',function(){
        var tr = this.parentNode;
        var tb = tr.parentNode;
      tb.removeChild(tr);

    });

    botao_editar.addEventListener('click', function(){
            var tr = this.parentNode;       

        for(var i =0; i< tr.children.length -2; i++){
                var td = tr.children[i];
            if(td.children[0].tagName = 'textarea')
            td.children[0].disabled = false;
        }

    });

O código dos inputs ficaria assim:

    inputNome.setAttribute('disabled',true);
    inputIdade.setAttribute('disabled',true);
    inputCidade.setAttribute('disabled',true);

Você pode executar por aqui mesmo

.

var botao_adicionar = document.querySelector("#adicionar_dados");
var campo_idade = document.querySelector("input[name='idade']");
var campo_nome = document.querySelector("input[name='nome']");
var campo_cidade=document.querySelector("input[name='cidade']");

var corpo_tabela = document.querySelector("tbody");

var contTab=0;
//funcoes
function TabelaDinamica(nome,idade,cidade){

		this.nome=nome;
		this.idade=idade;
		this.cidade=cidade;


		this.mostrar_dados=function() 
		{
		console.log(" nome é"+this.nome+
			"a idade é"+this.idade+
			"e a cidade é "+this.cidade)
        }

this.criar_linha_tabela = function()
{

		var linha = document.createElement("tr");
		var campo_nome = document.createElement("td");
		var campo_idade = document.createElement("td");
		var campo_cidade = document.createElement("td");

		var inputNome = document.createElement("textarea");
		var inputIdade = document.createElement("textarea");
		var inputCidade = document.createElement("textarea");
	
  	inputNome.setAttribute('disabled',true);
    inputIdade.setAttribute('disabled',true);
    inputCidade.setAttribute('disabled',true);
    

		var texto_nome = document.createTextNode(this.nome);
		var texto_idade = document.createTextNode(this.idade);
		var texto_cidade = document.createTextNode(this.cidade);


		inputNome.appendChild(texto_nome);
		inputIdade.appendChild(texto_idade);
		inputCidade.appendChild(texto_cidade);

		campo_cidade.appendChild(inputCidade);
		campo_idade.appendChild(inputIdade);
		campo_nome.appendChild(inputNome);

		var botao_editar = document.createElement("input");
		botao_editar.setAttribute('type','submit');
		botao_editar.setAttribute('value','editar');

		var botao_excluir = document.createElement("input");
		botao_excluir.setAttribute('type','submit');
		botao_excluir.setAttribute('value','excluir');	
		
    
    
		linha.appendChild(campo_nome);
		linha.appendChild(campo_idade);
        linha.appendChild(campo_cidade);
        linha.appendChild(botao_editar);
        linha.appendChild(botao_excluir);

        corpo_tabela.appendChild(linha);


        botao_excluir.addEventListener('click',function(){
        	var tr = this.parentNode;
        	var tb = tr.parentNode;
          tb.removeChild(tr);
        
        });
        
        botao_editar.addEventListener('click', function(){
        		var tr = this.parentNode;            
            for(var i =0; i< tr.children.length -2; i++){
            		var td = tr.children[i];
                if(td.children[0].tagName = 'textarea')
                td.children[0].disabled = false;
            }
        
        });

    
    }

  };

function adicionar_dados(event){

	event.preventDefault();

	nova_tabelaDinamica = new TabelaDinamica(campo_nome.value,campo_idade.value,campo_cidade.value);

	nova_tabelaDinamica.criar_linha_tabela();

	nova_tabelaDinamica.mostrar_dados();
	

};

botao_adicionar.addEventListener('click',adicionar_dados);
<body>
	<form action="" class="tabela">

		<label id="etiqueta" for="nome">Nome</label>
		<input required  type="text" name="nome" placeholder="Digite seu nome">

		<label for="idade">Idade</label>
		<input required type="number" name="idade" placeholder="Digite sua idade">

		<label for="cidade" >Cidade</label>
		<input required type="text" name="cidade" placeholder="Digite a sua cidade">

		<button id="adicionar_dados">Adicionar Linha</button>

	</form>
	<div class="alerta"></div>

	<hr>

	<table border="2px solid" >
		<thead>
			<tr>
				<td>Nome</td>
				<td>Idade</td>
				<td>Cidade</td>
			</tr>
		</thead>

		<tbody >
			
		</tbody>

			<hr>
	</table>


</body>

Espero ter ajudado.

4
  • O editar habilitaria a linha para poder mudar os valores 14/11/2017 às 15:21
  • Tente utilizar o código da solução, caso não consiga, comente aqui que a comunidade te ajuda. @RodrigodeSouzasilva
    – Felipe
    14/11/2017 às 16:49
  • Valeu cara muito obrigado !!! 15/11/2017 às 2:42
  • Se funcionou, marque como respondida, ajuda na visualização de outras pessoas que tiverem a mesma dúvida.
    – Felipe
    15/11/2017 às 10:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .