Boa tarde! Estou com uma dúvida por meses e ainda não consegui resolver.
Sou muito novato em Javascript... e preciso muito de uma ajuda.
Acontece o seguinte:
Este é meu arquivo HTML
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="../js/materialize.min.js"></script> <link rel="stylesheet" type="text/css" href="../css/materialize.min.css" /> <script type="text/javascript" src="js/tradicionais.js"></script> <table id="minhaTabela" class="bordered hoverable escondido"> <thead> <td width="103" height="40"><p>Nome<br> Tipo</p></td> <td width="94"><p><br> Estilo</p></td> <td width="51"><center>Origem</center></td> <td width="60">Teor Alc.</td> <td width="10"><center>Volume</center></td> <td width="1"><center>Preço</center></td> <td width="1"><center>Disponível</center></td> </thead> <tbody> </tbody> </table>
<div id="modal1" class="modal"> <div class="modal-content"> <h4>Informações Indisponíveis</h4> <p>Tente novamente mais tarde.</p> </div> <div class="modal-footer"> <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Fechar</a> </div> </div>
E este arquivo lê o javascript, que no caso é esse:
/** * Capturar itens do banco de dados */ function carregarItens(){ //variáveis var itens = "", url = "php/dadostradicionais.php"; $('#minhaTabela').css('width', $('#minhaTabela').text().length * 7); //Capturar Dados Usando Método AJAX do jQuery $.ajax({ url: url, cache: false, dataType: "json", beforeSend: function() { $("h2").html("<div class='preloader-wrapper small active'><div class='circle-clipper right'><div class='circle'></div></div></div>"); //Carregando }, error: function() { $("h2").html("Há algum problema com a fonte de dados"); }, success: function(retorno) { if(retorno[0].erro){ $("h2").html(retorno[0].erro); } else{ for(var i=0; i<retorno.length;){ itens += "<tr>"; itens += "<td><a href='#' onClick='Modal()'>" + retorno[i].nome +"</a></td>"; itens += "</tr>"; i++; } //Preencher a Tabela $("#minhaTabela tbody").html(itens); $('#minhaTabela').removeClass('escondido'); //Limpar Status de Carregando $("h2").html(""); } } }); } function Modal(){ $('#modal1').openModal(); }
Este arquivo .JS lê um PHP, que me trás a consulta do banco de dados e cria uma tabela em FOR.
Acontece que eu precisava fazer com que ao clicar no nome (no caso seria onde está +retorno[i].nome+) ele abrisse um modal com informações específicas de cada ID..
Como eu faço isso?
Obrigado