Enable Field of a given table row through a button with Jquery

Asked

Viewed 655 times

0

I’m doubtful for that system in Jquery,

The idea is when to click EDIT on a given line, activate only the inputs of that particular line of the clicked Edit.

There are also two Editing Privilege, ADM and NORMAL, the NORMAL should only edit the column NAME, the ADM the columns NAME and SALARY; that I got.

var op = "";
    	var privilegio = "";

    	function acesso(op){
    		privilegio = op;
    	}


    	function edit(){
    		if(privilegio == 'adm'){
    			$(this).parent().next().find('.salario').removeAttr('disabled');
    			$(this).parent().next().find('.nome').removeAttr('disabled');
    			
    		}
    		else{
    			$('table').find('.nome').removeAttr('disabled');
    		}
    		
    	}
<html>
	<head>
		<title>Desafio</title>
		<script src="http://localhost/2015-3/tratamentoevalidacao/jquery-2.2.0.min.js"></script>
		<meta charset="UTF-8">
	</head>
	<body>
		<input onclick="acesso('adm')" name="privilegio" type="radio" value="adm">Adm 
		<input onclick="acesso('normal')" name="privilegio" checked type="radio" value="normal">Normal

		<table border="1">
			<tr><td>Operações</td><td>Nome</td><td>Salário</td></tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit('editar')" value="Edit"><input class="excluir" type="button" onclick="excluir()" value="Excluir"></td>
				<td><input disabled  class="nome" type="text" name="nome"></td><td><input disabled class="salario"  type="text" name="salario"></td>
			</tr>
			
			

			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>

		</table>
	</body>
</html>

jquery

1 answer

0

below the problem resolution:

    	var op = "";
    	var privilegio = "";
    	var excluindo = 0;

    	function acesso(op){
    		privilegio = op;
    	}


    	function edit(edit){
    		if(privilegio == 'adm'){
    			$(edit).parent().next().find('input').prop("disabled", false);
    			$(edit).parent().next().next().find('input').prop("disabled", false);			
    		}
    		else{
    			$(edit).parent().next().find('input').prop("disabled", false);	
    		}

    		$(edit).parent().html('<input type="button" onclick="confirmar(this)" value="Confirmar">');	
    	}

    	function confirmar(conf){
    		if(excluindo == 1){
    			excluindo = 0;
    			$(conf).parent().next().find('input').val('');
    			$(conf).parent().next().next().find('input').val('');
    		}
    		$(conf).parent().next().find('input').prop("disabled", true);
    		$(conf).parent().next().next().find('input').prop("disabled", true);
    		$(conf).parent().html('<input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir">');

    	}

    	function excluir(excluir){
    		excluindo = 1;
    		if(privilegio == 'adm'){
    			$(excluir).parent().next().find('input').prop("disabled", false);
    			$(excluir).parent().next().next().find('input').prop("disabled", false);			
    		}
    		else{
    			$(excluir).parent().next().find('input').prop("disabled", false);	
    		}
    		$(excluir).parent().html('<input type="button" onclick="confirmar(this)" value="Confirmar">');	
    	}
<html>
	<head>
		<title>Desafio</title>
		<script src="http://localhost/2015-3/tratamentoevalidacao/jquery-2.2.0.min.js"></script>
		<meta charset="UTF-8">
	</head>
	<body>
		<input onclick="acesso('adm')" name="privilegio" type="radio" value="adm">Adm 
		<input onclick="acesso('normal')" name="privilegio" checked type="radio" value="normal">Normal

		<table border="1">
			<tr>
				<td>Operações</td>
				<td>Nome</td>
				<td>Salário</td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td><td class="salario"><input disabled  type="text" name="salario"></td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td><td><input disabled  type="text" name="salario"></td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td><td><input disabled  type="text" name="salario"></td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td><td><input disabled  type="text" name="salario"></td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td><td><input disabled  type="text" name="salario"></td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td><td><input disabled  type="text" name="salario"></td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td><td><input disabled  type="text" name="salario"></td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td><td><input disabled  type="text" name="salario"></td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td><td><input disabled  type="text" name="salario"></td>
			</tr>
			<tr>
				<td><input class="edit" type="button" onclick="edit(this)" value="Edit"><input class="excluir" type="button" onclick="excluir(this)" value="Excluir"></td>
				<td><input disabled type="text" name="nome"></td>
				<td><input disabled  type="text" name="salario"></td>
			</tr>
		</table>
	</body>
</html>

Browser other questions tagged jquery

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