How can I create an edit button to edit a dynamically created table in javaScript

Question

How can I create an edit button to edit a dynamically created table in javaScript

Navigation

#1 by (0 votes)

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);

I can create the most accurate table putting two buttons one to delete and another to edit more I have no idea how to do this.

javascript html html5 dom

asked by anonymous 14.11.2017 / 13:15

1 answer

How can a fragment call another fragment? Where is php.ini being loaded on this instance of Docker?

score 0 · Accepted Answer

Solution

Following its instructions, the inputs when created should be assigned disabled as an attribute, to be removed by the edit function.

The function code looks like this:

 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;
        }

    });

The input code looks like this:

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

You can run around here

.

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>

I hope I have helped.