Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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...
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>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>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...
Adiciona em todas por causa do .each() que vc fez.
IDs devem ser únicos.
Por isso essa tua confusão.
Como é o seu html ?