High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

Supprimer le contenu d'un div javascript

Dernière réponse le 17 mai 2009 à 16:51:42 nico, le 16 mai 2009 à 20:51:47 
 Signaler ce message aux modérateurs

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

Configuration: Windows Vista
Firefox 3.0.10

Meilleures réponses pour « supprimer le contenu d'un div javascript » dans :
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Javascript - Effacer un champ de formulaire lors du clic (focus) VoirIl vous est sûrement arrivé de tomber sur un formulaire HTML avec des valeurs pré-remplies décrivant par exemple le type de valeur attendue. L'intention est louable mais il est désagréable de devoir sélectionner ce texte et le supprimer avant de...
Javascript - Les tableaux VoirIntroduction à la notion de tableau Les variables de Javascript ne permettent de stocker qu'une seule donnée à la fois. Or, étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de variable se révéle parfois...
Webmastering - Contenu rédactionnel VoirImportance du contenu Les visiteurs reviennent généralement sur un site pour son contenu, plus que pour son design. Les études menées sur les internautes montrent que le facteur d'appréciation principal d'un site web est en premier lieu le contenu...
Posez votre question Répondre

1

HackTrack, le 17 mai 2009 à 09:20:38

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

   
Répondre à HackTrack

2

 nico, le 17 mai 2009 à 16:51:42

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

   
Répondre à nico
Posez votre question Répondre
Ils ont besoin de votre aide