Criando um link em uma tabela com AJAX

Olá galera,

Sou iniciante estou usando um exemplo de ajax de um tutorial do site do Jair Elton.
Tudo funciona perfeitamente, de criar um link em cima do parametro titulo para acionar uma action
a partir do id referente ao titulo que o usuario irá clicar, desta forma:

Segue o código da minha pagina:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Busca</title>
<style type="text/css">
	td, th{
		background-color: #EEEEEE;
		border: solid #CCCCCC 1px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
</style>
<script language="javascript">
	
	function newXMLHttpRequest(){
		var req = null;
		if(window.XMLHttpRequest){
			req = new XMLHttpRequest();
		}else if(window.ActiveXObject){
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		return req;
	}

	function buscar(chave){
		req = newXMLHttpRequest();
		req.open("GET", "http://localhost:8084/TesteAjax/Livros?chave="+chave, true);
		req.onreadystatechange = function(){
			if(req.readyState==4){
				if(req.status==200){
					var xml = req.responseXML;
					montaTabela(xml);										
				}
			}
		}
		
		req.send(null);
	}
	
	function montaTabela(xml){
		var elem = xml.getElementsByTagName("livro");
		
		var conteudo = document.createElement("TBODY");
		
		for(i=0;i<elem.length;i++){
			var livro = elem[i];
			
			var tr = document.createElement("tr");
			
			var tdId = document.createElement("td");
			var tdTit = document.createElement("td");
			var tdAutor = document.createElement("td");
			var tdEditora = document.createElement("td");
			var tdPreco = document.createElement("td");
			
			tdId.innerHTML = livro.getElementsByTagName("id").item(0).firstChild.data;
			tdTit.innerHTML = livro.getElementsByTagName("titulo").item(0).firstChild.data;
			tdAutor.innerHTML = livro.getElementsByTagName("autor").item(0).firstChild.data;
			tdEditora.innerHTML = livro.getElementsByTagName("editora").item(0).firstChild.data;
			tdPreco.innerHTML = livro.getElementsByTagName("preco").item(0).firstChild.data;
			
			tr.appendChild(tdId);
			tr.appendChild(tdTit);
			tr.appendChild(tdAutor);
			tr.appendChild(tdEditora);
			tr.appendChild(tdPreco);
			
			conteudo.appendChild(tr);
		}
		
		var tabela = document.getElementById("resultados");
		
		if(tabela.firstChild!=null){
			tabela.replaceChild(conteudo, tabela.firstChild);
		}else{
			tabela.appendChild(conteudo);
		}
	}
</script>
</head>
<body>


Titulo: <input type="text" name="chave" onKeyUp="javascript:buscar(this.value)" />
<br />
<br />
<table id="resultados" width="60%"></table>
</body>
</html>

Obrigado!

Rodrigo.

Topicos relacionados