MODAL com informações de table (FOR loop) (ID)

[Rubens Felisberto Neto 0]

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.nome+) ele abrisse um modal com informações específicas de cada ID..

 

Como eu faço isso?

Obrigado

[Rubens Felisberto Neto 0]

Ninguém para me ajudar? :(