Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

tiujhou

Seletor jquery funcionando diferente

Por , em Javascript

Recommended Posts

tiujhou    7

tiujhou
Postado

Boa noite... Galera hoje aconteceu algo estranho quando estava usando a biblioteca 2.1.1 jquery... eu nunca havia reparado uma diferença que aconteceu...

 

$(document).ready(function(e) {


var dietaTd         = $('#dieta tr');
var dietaInputTd = '<td><input type="text" value="" /></td>';




$('.adicionarColuna').on('click', function(){  
      //1 - var dietaTd         = $('#dieta tr');
dietaTd.each( function() { 
            $('#dieta tr').append(dietaInputTd); 
           //2 - dietaTd.append(dietaInputTd); 
         });   


});
});
A situação é a seguinte... da maneira que está o script adiciona as colunas na tabela normalmente... Mas se eu colocar a váriavel dietaTd dentro de ON, ele adiciona tudo errado as colunas... e se eu colocar essa váriavel no append, ele só adiciona a primeira linha a variável, e não cria a coluna adicionando todas as td...
Alguém tem ideia porque isso acontece... pois eu nunca havia passado por essa situação... sempre pensei que todas as maneiras que mostrei acima dariam certo... independente se fossem váriavel ou não, ou dentro ou fora do ON...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

IDs devem ser únicos.

Por isso essa tua confusão.

 

 

Como é o seu html ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

tiujhou    7

tiujhou
Postado
Bom dia @William Bruno, no meu caso o ID é único, é como passei acima, ele só funciona corretamente da maneira citada acima, se eu tirar do comentário as situações passada acima, ele não funciona corretamente...


<form action="" id="dieta">

<p>

<input type="button" name="adicionarLinha" value="Adionar Linha" class="adicionarLinha" />

<input type="button" name="adicionarColuna" value="Adicionar Coluna" class="adicionarColuna" />

</p>


<table cellspacing="0" cellpadding="0">

<tr>

<td><input type="text" value="1" /></td>

<td><input type="text" value="2" /></td>

<td><input type="text" value="3" /></td>

<td><input type="text" value="4" /></td>

</tr>

</table>



</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Me perdi um pouco, é isso aqui q vc tá fazendo?

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<form action="" id="dieta">
  <p>
    <input type="button" name="adicionarLinha" value="Adionar Linha" class="adicionarLinha" />
    <input type="button" name="adicionarColuna" value="Adicionar Coluna" class="adicionarColuna" />
  </p>

  <table cellspacing="0" cellpadding="0">
    <tr>
    <td><input type="text" value="1" /></td>
      <td><input type="text" value="2" /></td>
      <td><input type="text" value="3" /></td>
      <td><input type="text" value="4" /></td>
    </tr>
  </table>
</form>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(e) {
  var $dietaTr     = $('#dieta tr'),
      $adicionar   = $('.adicionarColuna'),
      dietaInputTd = '<td><input type="text" value="" /></td>';

  $adicionar.on('click', function(){
    $dietaTr.append(dietaInputTd);
  });
});
</script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

tiujhou    7

tiujhou
Postado

 

Desculpe... o código JS completo é este:

$(document).ready(function(e) {
	var dietaLinha   = $('#dieta tr:first');
	var dietaColuna  = $('#dieta td:first')
	var dietaTbody   = $('#dieta tbody');
	var dietaTd  	  = $('#dieta tr');
	var dietaInputTd = '<td><input type="text" value="" /></td>';
	
	
	
	
	$('.adicionarLinha').on('click', function(){ 	
		 var FFClinha =  dietaLinha.clone();	 
		 FFClinha.each( function() { 
            $( this ).find( "input" ).val( "" );
         });  
		 dietaTbody.append(FFClinha); 
		 
		; 
	});
	
	$('.adicionarColuna').on('click', function(){ 	
		dietaTd.each( function() { 
            $('#dieta tr').append(dietaInputTd); 
         });  	 
		  
	});
	
   
	
});
Mas a ideia é esta mesmo, a situação é que se eu colocar as opções que estavam mostradas acima... ele não funciona corretamente...

 

Eu coloquei dietaTd.append(dietaInputTd); ... e só adiciona na primeira linha... já se eu colocar $('#dieta tr') , ele adiciona em todas... eu não entendi o porque...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Adiciona em todas por causa do .each() que vc fez.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito