Utiliser la fonction Filter

Méridian · 07/03/2011, 19h24

Bonjour à tous !

Cela fait peu de temps que j'apprends à me servir de Jquery et je dois faire l'exercice suivant : j'ai cette page html :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Catalogue</title>
 
	<link rel="stylesheet" type="text/css" media="screen" href="catalogue.css" />
	<link type="image/x-icon" rel="shortcut icon" href="http://www.meridian.webou.net/favicon.ico"  />
	<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
	<script src="lib/jquery-1.5.1.js" type="text/javascript"> </script>
	<script src="catalogue.js" type="text/javascript"></script>
</head>
<body>
 
<table>
	<tr><td> Nom article</td> <td> Prix </td><td> En Promotion </td></tr>
	<tr><td> Frigidaire</td><td> 50€30</td><td> Oui </td></tr>
	<tr><td> Scooter </td><td> 100€40 </td> <td> Non</td></tr>
	<tr><td> Blabla </td><td> 98€</td><td> Non </td></tr>
	<tr><td> Cuisinière </td><td> 74€</td><td> Non </td></tr>
</table>
 
</body>
</html>

et je dois faire en sorte que les prix inférieurs à un montant arbitraire soient affichés en rouge.

J'ai cherché, tourné la fonction de différentes manières mais je suis incapable de trouver la solution.

Voici le dernier essai que j'ai réalisé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function()
{
	$('tr:odd') .addClass('bg-odd');
	$('tr:even') .addClass('bg-even');
	$('td:contains(Oui) ') .addClass('bold');
 
});
 
$(document).ready(function() 
{
        $('td').filter("[table]").css('color':'red');
});

En vous remerciant

roster · 07/03/2011, 23h22

Bonsoir,

Une solution possible:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function()
{
    var test = 80;
 
    $('tr:odd').addClass('bg-odd');
    $('tr:even').addClass('bg-even');
    $('td:contains(Oui) ').addClass('bold');
 
    $('td').filter(function(){return ($(this).text().indexOf('€')!=-1 && parseFloat($(this).text().replace('€','.'))<test)?true:false; }).css('color','red');
 
 
});

NoSmoking · 07/03/2011, 23h32

il ne s'agirait pas de

Code :

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

$('td:contains("Oui")').addClass('bold');

Oui avec guillemet...

Méridian · 08/03/2011, 13h04

Bonjour !

Merci d'avoir répondu,
j'ai testé vos solutions mais ça n'a pas voulu fonctionner !!
Au final j'ai mis :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function()
{
	$('tr:odd') .addClass('bg-odd');
	$('tr:even') .addClass('bg-even');
 
 
	$('td').filter(function()
	{
		return $(this).html() < 85
	}).css({'color':'red'});
 
});

Merci encore !

07/03/2011, 23h32	#3
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	il ne s'agirait pas de Code : Sélectionner tout - Visualiser dans une fenêtre à part $('td:contains("Oui")').addClass('bold'); Oui avec guillemet...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email