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

Asked

Viewed 2,242 times

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 put two buttons one to delete and the other to edit more I have no idea how to do this .

javascript html html5 dom

  • I recommend watching these videos from Rodrigo Branas he explains everything you want to do a few more things using Angularjs

  • What the "Edit" button has to do by clicking on it?

1 answer

0


Solution

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

The function code would look 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 would look like this:

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

You can run by right 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’ve helped.

  • edit would enable the line to change values

  • Try using the solution code, if you can’t, comment here that the community helps you. @Rodrigodesouzasilva

  • Thank you very much guy !!!

  • If it worked, mark as answered, help in viewing other people who have the same question.

Browser other questions tagged javascript html html5 dom

You are not signed in. Login or sign up in order to post.