Modifier dynamiquement des class

**titou250** · 02/08/2006, 15h01

Bonjour

J'ai dans une page html un tableau avec x lignes à l'intérieure.
Je voudrais modifier de façon dynamique l'affichage des lignes.
C'est à dire que sur un Onchange d'un bouton select, je veux pouvoir afficher tel ou tel ligne du tableau (celle ayant la même class).
J'utilise la class Prototype.js, mais je ne sais pas comment dire au javascript d'ajouter la valeur "display:none"
Auriez vous une idée?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function affichage() {
	val = $("selectaffich").value;
	switch (val)
	{
	case "1" :
		alert(document.getElementsByClassName("test"));
		break;
	case "2" :
		alert(document.getElementsByClassName("test"));
		document.getElementsByClassName("test").display="none";
	break;
		case "3" :
		alert(document.getElementsByClassName("test"));
			document.getElementsByClassName("test").style.display="none";
		break;
		default :
		}
	}
 
<select id="selectaffich" onchange="affichage()">
						<option value="1">Afficher toutes les offres</option>
						<option value="2">Afficher les offres en lignes</option>
						<option value="3">Afficher les offres hors ligne</option>
					</select>
 
<table>
  <tr class="t1">
    <td>toto</td>
  </tr>
  <tr class="t2">
    <td>toto</td>
  </tr>
 <tr class="t1">
    <td>toto</td>
  </tr>
  <tr class="t2">
    <td>toto</td>
  </tr>
</table>

**Celeri** · 02/08/2006, 19h26

Bonjour,

Je ne vois pas bien la difficulté ... alors je te propose d'essayer quelque chose de très simple (sans la blibliothèque) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

event.target.style.display="none";

sur IE cela est plutôt : event.srcElement. ...

**titou250** · 03/08/2006, 13h34

Le souci est que je voudrais pouvoir cacher en un click toutes les lignes du tableau ayant pour class "t1", et ne laisser afficher que les lignes du tableau qui ont la classe "t2"

**marcha** · 03/08/2006, 14h15

Salut,

c'est aujourd'hui possible, mais il y a qq risque d'incompatibilité.

regarde ce site http://www.quirksmode.org/dom/changess.html

Et tu peux tester cet exemple, il marche sur IE6, FireFox 1.5, Netscape 8.1,
mais pas sur opéra !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type='text/css'>
h1.test { color: red; }
</style>
</head>
<body>
<h1 class='test'>Titre 1</h1>
<h1>Titre 2</h1>
<h1 class='test'>Titre 3</h1>
<script language='javascript' type='text/javascript'>
	function changeIt()
	{
		if (!document.styleSheets) return;
		var theRules = new Array();
		if (document.styleSheets[0].cssRules)
			theRules = document.styleSheets[0].cssRules
		else if (document.styleSheets[0].rules)
			theRules = document.styleSheets[0].rules
		else return;
		theRules[theRules.length-1].style.color = 'yellow';
	}
 
</script>
<a href='javascript:changeIt()'>Modifier le css</a>
</body>
</html>

Modifier dynamiquement des class

JavaScript

Discussions similaires

Partager

Partager