Discussion :

[Indiana Fighter]

Bonjour,

Voilà mon problème : j'ai un tableau pour lequel je veux appliquer un filtre de sélection jquery sur les cellules <td>. Après quelques recherche, j'ai jeté mon dévolu sur la fonction filter() de jquery qui m'a l'air tout a fait adapté a cette utilisation. Mais pas moyen de la faire fonctionner avec une fonction : .filter(function)
Le filtre se fait sur l'id des td qui doivent correspondre à une regex. Le but étant de ne récupéré uniquement que certaines cellules, et leur appliquer par la suite une modification css : ici par exemple ajout d'une bordure rouge.

Auriez vous une piste a me fournir??

Code html du tableau :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<table class="current_container_table" border="1">
	<tr>
		<td>
			<img src="/icones/16x16/MG.png"/>
		</td>
 
		<td>
			<b>1</b>
		</td>
 
		<td>
			<b>2</b>
		</td>
 
		<td>
			<b>3</b>
		</td>
 
		<td>
			<b>4</b>
		</td>
 
		<td>
			<b>5</b>
		</td>
	</tr>
 
	<tr id="current_container_table_L_1_S_1">
		<td>
			<b>A</b>
		</td>
 
		<td id="current_container_table_C_1_L_1_S_1" class="shema_cell shema_empty_cell" align="center">
			<br/>
		</td>
 
		<td id="current_container_table_C_2_L_1_S_1" class="shema_cell shema_empty_cell" align="center">
			<br/>
		</td>
 
		<td id="current_container_table_C_3_L_1_S_1" class="shema_cell shema_empty_cell" align="center">
			<br/>
		</td>
 
		<td id="current_container_table_C_4_L_1_S_1" class="shema_cell shema_empty_cell" align="center">
			<br/>
		</td>
 
		<td id="current_container_table_C_5_L_1_S_1" class="shema_cell shema_empty_cell" align="center">
			<br/>
		</td>
	</tr>
 
	<tr id="current_container_table_L_2_S_1">
		<td >
			<b>B</b>
		</td>
 
		<td id="current_container_table_C_1_L_2_S_1" class="shema_cell shema_empty_cell" align="center">
			<br/>
		</td>
 
		<td id="current_container_table_C_2_L_2_S_1" class="shema_cell shema_empty_cell" align="center">
			<br/>
		</td>
 
		<td id="current_container_table_C_3_L_2_S_1" class="shema_cell shema_tube_cell" align="center">
			<br/>
		</td>
 
		<td id="current_container_table_C_4_L_2_S_1" class="shema_cell shema_empty_cell" align="center">
			<br/>
		</td>
 
		<td id="current_container_table_C_5_L_2_S_1" class="shema_cell shema_empty_cell" align="center">
			<br/>
		</td>
	</tr>
</table>

Code JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function my_function()
{
	var reg = new RegExp("^current_container_table_C_[0-9]_L_1_S_");
 
	$('table.current_container_table tr#current_container_table_L_1_S_1 td.shema_cell').filter(function()
											{
												return reg.test($(this).attr('id'));
											}
	).css('border', 'solid red 2px');
}

Au final, ben il ne se passe rien. Aucunes cellules ne voient sa bordure modifiée. Pourtant, un alert(reg.test($(this).attr('id'))) dans la fonction du .filter(function) me renvoie bien le booléan !! Strange is'nt it? Je pense que l'erreur vient de la mauvaise utilisation de cette fonction filter().

merci d'avance

[SpaceFrog]

pourquoi passer par filter ? tu veux selectionner des id par une regExp ?

suffit d'un petit addon jquery
http://www.jquery.info/spip.php?article91

[Indiana Fighter]

Merci SpaceFrog pour ta réponse !!

En effet, ca marche très bien. Je n'ai même pas eu a rajouter l'addon

Code :

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

1
2
3
4
5
 
function my_function()
{
	$('table.current_container_table tr#current_container_table_L_1_S_1 td.shema_cell:regex(id, ^current_container_table_C_[0-9]_L_1_S_[0-9])').css('border', 'solid red 2px');
}

Les bonnes cellules ont reçu la modif.

J'ai ensuite voulu rendre cette fonction plus complexe en utilisant 2 regex :

Code :

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

1
2
3
4
5
 
function my_function()
{
	$('table.current_container_table tr:regex(id, ^current_container_table_L_1_S_[0-9]) td.shema_cell:regex(id, ^current_container_table_C_[0-9]_L_1_S_[0-9])').css('border', 'solid red 2px');
}

Mais là un problème arrive : toutes les cellules ayant pour classe 'shema_cell' sont modifiées .... Pourtant ma regex ne semble pas incorrecte ! J'utilise jquery 1.4.2
Ce pourrait-il que ce problème vienne du fait que je n'ai pas mis l'addon? S'il c'est le cas, comment se fait cet ajout?? (oui je sais la question doit paraître idiote ). Me suffit-il de rajouter le code dans le fichiers jquery? Si oui, où faut-il le mettre ?

[SpaceFrog]

Si tu ne rajoutes pas le code ...

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
<script type="text/javascript">
jQuery.expr[':'].regex = function(elem, index, match) {
   var matchParams = match[3].split(','),
       validLabels = /^(data|css):/,
       attr = {
           method: matchParams[0].match(validLabels) ?
                       matchParams[0].split(':')[0] : 'attr',
           property: matchParams.shift().replace(validLabels,'')
       },
       regexFlags = 'ig',
       regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
   return regex.test(jQuery(elem)[attr.method](attr.property));
}
$(document).ready(function(){
 $('.toc:regex(id,^foo)').css({'background-color':'red'})       
 });
 
  </script>
<style type="text/css">
 td{border:solid 2px red;
 }            
  </style>
  </head>
<body>
 <div class="toc" id="foo1"> plop</div>
 <div class="toc" id="foo2"> plop</div> 
 <div class="tac" id="foo2"> plop</div> 
 </body>
</html>

[Indiana Fighter]

Ah bah voui, avec le code, ben ca marche

Merci bcp SpaceFrog. Plus j'en apprends sur jquery, plus je le trouve formidable

En réalité, cette histoire de sélection d'id par regex avait une utilité autre que la modification de la css.
Je voudrais générer un tableau dont toutes les cellules ont la même taille (width et height). Je pourrais tout bêtement définir un width aux td, mais leur contenu pouvant varier, cela ne serait pas une solution acceptable. Maintenant que j'arrive a sélectionner les bonnes cellules, il me faut récupérer leur valeur de width et de height, prendre les valeur maximales, et enfin les appliquer à toutes les cellules.
Là ou je sèche, c'est comment récupérer les valeurs de width des cellules et en retirer la valeur maximum.

Auriez-vous une idée? En espérant avoir été clair...

[SpaceFrog]

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
<script type="text/javascript">
jQuery.expr[':'].regex = function(elem, index, match) {
   var matchParams = match[3].split(','),
       validLabels = /^(data|css):/,
       attr = {
           method: matchParams[0].match(validLabels) ?
                       matchParams[0].split(':')[0] : 'attr',
           property: matchParams.shift().replace(validLabels,'')
       },
       regexFlags = 'ig',
       regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
   return regex.test(jQuery(elem)[attr.method](attr.property));
}
$(document).ready(function(){
 var largeur=0
 $('.toc:regex(id,^foo)').each(function(){largeur=($(this).width()>largeur)?$(this).width():largeur;}).css({'width':largeur+'px'})
 
 });
 
  </script>
<style type="text/css">
#foo1 {
width:300px;
background-color:red;
 }            
#foo2 {
width:200px;
 background-color:green;}            
 
  </style>
  </head>
<body>
 <div class="toc" id="foo1"> plop</div>
 <div class="toc" id="foo2"> plop</div> 
 <div class="tac" id="foo5"> plop</div> 
 </body>
</html>

[Indiana Fighter]

Wouaaah trop puissante la grenouille de l'espace !!

Super ça marche du feu de Dieu. Merci bcp

Voilà le code fait à ma sauce

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
 
function size_shema_current_container_tab()
{
	var max_width = 0;
	var max_height = 0;
 
	// On récupère le width max et on l'applique à la sélection
	$('table.current_container_table tr:regex(id, ^current_container_table_L_1_S_[0-9]+) td.shema_cell:regex(id, ^current_container_table_C_[0-9]+_L_1_S_[0-9])')
		.each(function()
			{
				max_width=($(this).width()>max_width)?$(this).width():max_width;
			})
		.css({'width':max_width+'px'});
 
	// On récupère le height max et on l'applique à la sélection
	$('table.current_container_table td.shema_cell:regex(id, ^current_container_table_C_1_L_[0-9]+_S_[0-9]+)')
		.each(function()
			{
				max_height=($(this).height()>max_height)?$(this).height():max_height;
			})
		.css({'height':max_height+'px'});
}