Supprimer le contenu d'un div javascript

Fermé
nico - 16 mai 2009 à 20:51
 nico - 17 mai 2009 à 16:51
Bonjour,
Je suis en train de faire un tableau où lorsque l'on passe la souris sur une ligne des informations sur la ligne en question s'affichent (les infos sont extraites de la base de données , envoyer via xmlhttprequest et insérer avec innerhtml) par contre je voudrais que lorsque l'on retire la souris de la ligne en question tout ce qui vient de s'afficher s'efface et c'est la ou ça coince. Voila mon code javascript:
affiche(id){
if (id!=0)
{
var xhr; // on déclare l'instance
if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // Firefox, Opera, Konqueror, Safari, ...
else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP'); // Internet Explorer
else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...'); // Navigateur ancien
xhr.open('POST','test1.php',true);
xhr.onreadystatechange = function() // attribution de la fonction
{
if (xhr.readyState == 4)
{
document.getElementById("liste_statut"+id).innerHTML = xhr.responseText;
}
}
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var data = 'id='+id;
xhr.send(data);


}
else if(id==0)
{
var ligne=document.getElementById("ligne_statut"+id);
var div=ligne.firstChild;
table.removeChild(ligne);
}

}
Si vous avez une idée je suis preneur...
Merci
A voir également:

2 réponses

Utilisateur anonyme
17 mai 2009 à 09:20
Salut!

Si tu peux remplacer l'affichage des infos dans un div séparé par l'attribut title d'un TR, voci une solution facile et élégante:

<html>
	<head>
		<style>
			table{
				background-color: #dddddd;
			}
			tr{
			}
			th{
				background-color: #8888FF;
			}
			td{
				background-color: #eeeeee;
			}
		</style>	
		<script language=javaScript>
			function affiche(id){
				if (id!==0){
					var xhr=getXhr(id); // on déclare l'instance
					var data = 'id='+id;
					xhr.send(data);
				}else if(id===0){
					var ligne=document.getElementById(id);
					var div=ligne.firstChild;
					table.removeChild(ligne);
				}

			}
			function getXhr(id){
				var xhr = null;
				if (window.XMLHttpRequest){
					xhr = new XMLHttpRequest(); // Firefox, Opera, Konqueror, Safari, ...
				}else if (window.ActiveXObject){
					xhr = new ActiveXObject('Microsoft.XMLHTTP'); // Internet Explorer
				}
				if(xhr!==null){
					xhr.open('POST','test1.php',true);
					xhr.onreadystatechange = function(){ // attribution de la fonction
						if (xhr.readyState == 4){
							document.getElementById(id).title = xhr.responseText;
						}
					}
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				}else{
					alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...'); // Navigateur ancien
				}
				return xhr;
			}
		</script>

	</head>

	<body>
		<table>
			<tr>
				<th>Nom</th>
				<th>Prénom</th>
				<th>Date de naissance</th>
				<th>Nationalité</th>
			</tr>
			<tr title="" id="1234" onmouseover="javascript:affiche(this.id);">
				<td>Albert</td>
				<td>Einstein</td>
				<td>14/03/1879</td>
				<td>Allemand</td>
			</tr>
			<tr title="" id="3456" onmouseover="javascript:affiche(this.id);">
				<td>Hack</td>
				<td>Track</td>
				<td>28/01/1964</td>
				<td>Belge</td>
			</tr>
		</table>
	
	</body>
</html> 


;-)
HackTrack
0
Merci pour ta réponse, j'ai essayé mais ca ne me plaisais pas. J'ai réussi à m'en sortir grâce à la librairie jquery en utilisant ceci:
$(xhr.responseText).appendTo("#liste_statut"+id); là j'insère le résultat issu d'une page php dans un div.
$("#liste_statut"+id).empty();;là je supprime le contenu du div en question.
Bonne journée
0