[Resolvido] Uso do 'This'

[KMRodrigo 1]

Olá galera, bom andei lendo um pouco sobre esse tal "this" e descobri a funcionalidade. Seguinte:

 var tr = '<tr>'+ 
                       '<td bgcolor="#63B8FF">'+DE_descricao+'</td>'+
                       '<td bgcolor="#63B8FF">'+DE_valor+'</td>'+
                       '<td width ="3px" bgcolor="red" class="excluir">DEL</td>'+
                       '</tr>'; 


	$('.excluir').live('click',function(){
	$( this ).parent('tr').remove(); // bom o uso do This aqui é simples, ao clicar na td com a classe excluir vai deletar a var tr,
.................................................//e o This é utilizado para identificar que apenas a var TR que eu clickei será deletada, já q todas as linhas recebem o mesmo nome. (bom entendi isso)
	});				

    	$('#grid').find('tbody').append( tr );

	var hiddens = '<div class="exc"><input type="hidden" name="DE_descricao[]" value="'+DE_descricao+'" />'+
		'<input type="hidden" name="DE_valor[]" value="'+DE_valor+'" /></div>';

	$('#form_insert').find('fieldset').append( hiddens ); 

 

a minha duvida é que ao clicar no td com a class excluir tmb tem que excluir a var hiddens. então fiz o seguinte.

 

var tr = '<tr>'+ 
                       '<td bgcolor="#63B8FF">'+DE_descricao+'</td>'+
                       '<td bgcolor="#63B8FF">'+DE_valor+'</td>'+
                       '<td width ="3px" bgcolor="red" class="excluir">DEL</td>'+
                       '</tr>'; 


	$('.excluir').live('click',function(){
	$( this ).parent('tr').remove();
               $('div').remove('.exc');  //aqui esta o erro, assim ele acaba deletando todos os dados, e se usar o This ele n deleta nenhum.
               });

    	$('#grid').find('tbody').append( tr );

	var hiddens = '<div class="exc"><input type="hidden" name="DE_descricao[]" value="'+DE_descricao+'" />'+ //criei uma div para usar o .remove()
		'<input type="hidden" name="DE_valor[]" value="'+DE_valor+'" /></div>';

	$('#form_insert').find('fieldset').append( hiddens ); 

 

Como o This reconhece qual está sendo usado? Tipo o this sabe qual estou me referindo pelo click assim sendo ele só vai "apontar" pra var TR?

Se alguem tiver uma idéia de como deletar o hiddens tmb eu agradeço, estou desde as 9 da manha tentando.

[Buongiorno 0]

Olá amigo.

 

 

O this é usado para se fazer referência ao próprio objeto em questão. Assim numa input, por ex., quando escrevemos:

this.value nos referimos ao valor da input;

this.id ao seu id;

this.className ao nome da classe css atribuída a ela;

this.title ao título;

etc.

 

 

Veja estes exemplos:

 

<input type="text" value="Olá mundo" onclick="alert(this.value);" />
<input type="text" id="entrada2" onclick="alert(this.id);" />
<input type="text" class="campo" onclick="alert(this.className);" />
<input type="text" title="teste" onclick="alert(this.title);" />

 

Aqui "this" refere-se ao próprio objeto cujo id é "entrada"

<input type="text" id="entrada" class="campo" onclick="alert(this.className);" />

 

Aqui é como nos refirimos ao mesmo objeto estando fora dele.

 

<input type="button" value="Clik-me" onclick="alert(document.getElementById('entrada').className);" />

 

 

 

 

Espero ter ajudado.

 

Até mais.

[KMRodrigo 1]

Vlw Buongiorno :joia: ajudou mto msm.

 

no ultimo exemplo, o "estando fora" não seria .id no fim?

[William Bruno 1501]

tanto faz o atributo que você está tentando exibir.

 

<input type="text" id="entrada" class="campo" value="ae" onclick="alert(this.className);" />


<input type="button" value="Clik-me" onclick="alert(document.getElementById('entrada').value);" />
<input type="button" value="Clik-me" onclick="alert(document.getElementById('entrada').id);" />
<input type="button" value="Clik-me" onclick="alert(document.getElementById('entrada').className);" />
<input type="button" value="Clik-me" onclick="alert(document.getElementById('entrada').type);" />

 

veja que o .qqcoisa é atributo HTML que você quer 'resgatar'

[KMRodrigo 1]

Pqp caiu a fixa agora... do input de id=entrada ele retira o "className" ou o próprio "id"... Entre parenteses você indica o elemento e no .qqrcoisa indica o que quer desse elemento... isso?

 

Ok vlw bruno... cara uma dica... pra mim apagar o hidden eu vou precisar do This neh, pra n apagar tudo?

to conseguindo fazer testes mais rapidos pq to usando

 

$('#grid').find('tbody').append( hiddens ); 

 

pra exibir, eu n conhecia a maioria desses comando to pegando de um em um e dando uma lida. Mas n to conseguindo referenciar o hidden para ser apagado.

 

 

vlw pelo esforço em me ajudar, eu sei q to dando trabalho jah rsrs

[William Bruno 1501]

o this é o objeto atual

 

se os hiddens estiverem longe do objeto atual, não forem filhos desse objeto, então você não vai conseguir fazer, entendeu ?

esse é o problema desde o inicio.

 

você precisa entender a estrutura DOM do HTML, ai sim conseguirá desenvolver.

No mais, parabéns pelo esforço e continue lendo cada metodo e função individualmente.

[KMRodrigo 1]

Ok bruno, vlw pelo apoio. Vo dar uma lida sobre DOM... Brigadão

 

Vamos lá.... O elemento apontado pelo this. é o TD..... o TD é filho de TR(que ainda ñ é um nó raiz, é filho do table(?)) e por isso foi usado o .parent para indicar que sera o pai do "this" que será atingido pela ação.... (pai do TD é o TR) ...

o hiddens não é nda do TD.... agora a questão é fazer ele "entrar para a família"?

encontrei esse comando, estou lendo com google translate portanto n sei se to com a idéia certa

x.appendChild ( nó ) - inserir um nó filho para x.... isso conseguirá colocar o hidden no msm grupo do td?

[William Bruno 1501]

sim.. agora você está entendendo... então no teu caso:

 

 

var tr = '<tr>'+ 
                       '<td bgcolor="#63B8FF">'+DE_descricao+'</td>'+
                       '<td bgcolor="#63B8FF">'+DE_valor+'</td>'+
                       '<td width ="3px" bgcolor="red" class="excluir">DEL</td>'+
                       '<td><input type="hidden" name="DE_descricao[]" value="'+DE_descricao+'" />'+
                       '<input type="hidden" name="DE_valor[]" value="'+DE_valor+'" /></td>'+
                       '</tr>'; 

agora os hidden são filhos da table, e filhos do mesmo TR

 

e o THIS faz sentido nesse contexto, e você conseguirá atingir eles.

Assim o form precisa estar por fora dessa table, ou seja, você vai dar append() dos TRs + HIDDENs correspondentes na TABLE, e não mais numa DIV separada.

 

 

=) Gz !

[KMRodrigo 1]

Vlw manow Funcionou (aparentemente vou testar mais um pouco pra garantir heuhehue)

 

k7 brigadão msm william q Deus abençoe ainda mais....

 

Funcionou que uma maravilha na verdade ficou assim

javascript

<script type="text/javascript">
$(document).ready(function(){
$('#form_prepare').submit(function(){
	var $this = $( this );

	var DE_descricao = $this.find("input[name='DE_descricao']").val(),
		DE_valor = $this.find("input[name='DE_valor']").val();


	var tr = '<tr>'+ 
                       '<td bgcolor="#63B8FF">'+DE_descricao+'</td>'+
                       '<td bgcolor="#63B8FF">'+DE_valor+'</td>'+
                       '<td width ="3px" bgcolor="red" class="excluir">DEL</td>'+
                       '<td><input type="hidden" name="DE_descricao[]" value="'+DE_descricao+'" />'+
                       '<input type="hidden" name="DE_valor[]" value="'+DE_valor+'" /></td>'+
                       '</tr>'; 





	$('.excluir').live('click',function(){
	$( this ).parent('tr').remove();
	});				

    	$('#grid').find('tbody').append( tr );


	return false;
});
});
</script> 

 

html

<form action="" method="post" id="form_insert"> //esse form começava após a tabela abaixo 
	<table id="grid" border = "1" align="center" width ="50%" >
	<thead>
		<tr>
		<th bgcolor="#1874CD" >Descricao</th>
		<th bgcolor="#1874CD" >Valor</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
	</table>

		<tr>
		<td>
		<input name="DE_numReferencia" type="hidden" id="DE_numReferencia" size="4" maxlength="10"value="<?php 
		$referencia = "$mes-$year";
			mysql_connect("localhost", "root", ""); //ignore isso irei reorganizar depois  
			mysql_select_db("leadersystem"); 	//isso tmb =)

			$sql_busca = "SELECT * FROM cotacao WHERE CO_referencia = '$referencia'";
			$exe_busca = mysql_query($sql_busca);

			$numero_registros = mysql_num_rows($exe_busca) + 1;

			if (strlen("" . $numero_registros) == 1) $num_referencia = "00" . $numero_registros;
			else if (strlen("" . $numero_registros) == 2) $num_referencia = "0" . $numero_registros;
			else $num_referencia = $numero_registros;
			$num_referencia = $num_referencia - 1;
			echo $num_referencia;
			$numReferencia = $num_referencia;
		?>" > </td>
<td><input name="DE_referencia" type="hidden" id="DE_referencia" size="10" maxlength="10" <?php echo "value='$mes-$year' ";?> >								
</td>

</tr>	
<br>					// O form começava aqui e os dados da tabela eram adicionados no fieldSet q está abaixo

		<center><fieldset style=""></fieldset> // O append jogava aqui os dados.
		<label><input type="submit" name="cadastrar" value="Cadastrar" /></label>
	</center></form> 

 

Ha é.... Tópico Resolvido :joia:

[guidjos 65]

Queria fazer um adendo. Em JavaScript, 'this' é ligado a objetos diferentes dependendo do contexto.

 

Se for usado dentro da descrição de um objeto, ele se refere ao próprio objeto (similarmente, por causa da arquitetura do DOM, o 'this' é ligado ao objeto criado pela tag HTML cujo atributo o utiliza). Se, contudo, for utilizado dentro de uma função que está dentro de outra função que é valor de uma propriedade do objeto sendo descrito, ele é ligado ao objeto global. É por isto que se usa o hack do "var that = this;", ou "var self = this;", para então usar "that" ou "self" dentro da função e referenciar o contexto da função pai:

 

<script>
   var obj = {

propriedade: "valor",

metodo: function foo () {
    return function bar () {
	return propriedade; // reference error: 'propriedade' não definido.
    };
}
   };

   var funcao = obj.metodo();

   alert(funcao());
</script>

 

Contorna-se este engano da seguinte forma:

 

<script>
   var obj = {

propriedade: "valor",

metodo: function foo () {

    var self = this;

    return function bar () {
	return self.propriedade;
    };
}
   };

   var funcao = obj.metodo();

   alert(funcao());
</script>

 

Se for usado por uma função com escopo global (declarado fora de quaisquer outras funções), 'this' é ligado ao objeto global, a não ser que ela seja invocada usando a palavra 'new'. Este é exatamente o problema com funções chamadas "construtoras": se o 'new' não for usado, a função altera propriedades do objeto global, ao invés das propriedades de um novo objeto criado:

 

function Pessoa(n) {
   this.nome = n;
}

var alguem = new Pessoa("Guilherme"); // ok
var maisum = Pessoa("Carlos"); // perigo: objeto global agora possui uma propriedade "nome" com valor "Carlos"

[KMRodrigo 1]

Vlw guidjos

 

Java tmb é muito interessante, inclusive diferente do PHP e Javascript que to aprendendo na marra, Java eu tenho aula, infelizmente a aula sem a prática é menos eficiente que a prática sem a aula. Por tanto to aprendendo mais o PHP, gosto de java e tenho colegas que são ferradoes em programação e estou tentando aprender java um pouco mais a fundo para trabalhar com eles em pequenos projetos, semanas atrás eles estavam desenvolvendo para Android achei legal pacas.