creation de rules css avec jquery en runtime

Version imprimable

Je m'amusais a développer une petit plugin de colorisation de lignes de tableau, et je voulais éviter d'avoir a relancer la coloration des lignes sur le callback du hover, d'ou l'idée d'utiliser un addClass et removeClass...

J'ai donc tenté ceci:

Code:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<title>Nouvelle page 1</title>
<style type="text/css">
table {width:100%;
	border-collapse:collapse;}
td {border: solid 1px grey:
}
</style>
<script type="text/javascript">
(function($) {
        $.fn.ColorTableRows = function(params) {
        var defaut={"evenColor":'#FFFCD2',"oddColor": '#FFF778', "hoverColor":'#FFA64F'};
        var opts= $.extend(defaut,params)
 
        $('<style type="text/css"> .hover{ background-color:'+opts.hoverColor+';}</style>').appendTo($("head")[0]);
 
        $(this).find('tr:even').css({'background-color':opts.evenColor});
        $(this).find('tr:odd').css({'background-color':opts.oddColor});
        $(this).find('tr').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');})
 
        };
})(jQuery);
 
 
$(function(){
 $("#foo").ColorTableRows() 
 
})
</script>
 
</head>
 
<body>
<table id="foo">
	<tr>
		</td>&nbsp;h</td>
	</tr>
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
</table>
</body>
 
</html>

Mais il semblerait que ma creation de rule css reste vaine ?

26/07/2011, 11h24
Invité

salut,

je pense que quand tu fais

Code:

$(this).find('tr:odd').css({'background-color':opts.oddColor});

par exemple, les css sont rajoutés dans le dom.
Et on sait bien sûr que un truc dans le dom c'est prioritaire devant les définitions dans un style sheet (au niveau des sélecteurs)

Donc tu peux retirer ces deux lignes où leur affecter du css comme dans le style avec des selecteurs css.
Un exemple très simple qui illustre :

Code:

$('<style type="text/css"> .hover{ color:green; background-color:'+opts.hoverColor+';}</style>').appendTo($("head")[0]);

On voit que la couleur green est bien appliquée.

ps : les td ouvrants c'est mieux avec :aie:

arf pour les </td> à l'ouvertuer un soucie de copier coller :red:

bon alors la solution c'est juste de rajouter important ^^

Code:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<title>Nouvelle page 1</title>
<style type="text/css">
table {width:100%;
	border-collapse:collapse;}
td {border: solid 1px grey:
}
</style>
<script type="text/javascript">
(function($) {
        $.fn.ColorTableRows = function(params) {
        var defaut={"evenColor":'#FFFCD2',"oddColor": '#FFF778', "hoverColor":'#FFA64F'};
        var opts= $.extend(defaut,params)
 
  		 var newstyle = $('<style type="text/css"> .hover{ background-color:'+opts.hoverColor+' !important;}</style>').appendTo($("head")[0]);			
      	 $(this).find('tr:even').css({'background-color':opts.evenColor});
        $(this).find('tr:odd').css({'background-color':opts.oddColor});
        $(this).find('tr').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');})
 
        };
})(jQuery);
 
 
$(function(){
 $("#foo").ColorTableRows() 
 })
</script>
 
</head>
 
<body>
<table id="foo">
	<tr>
		<td>&nbsp;h</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
</table>
</body>
 
</html>

De façon a forcer la priorité du css pour le hover
:merci:

en y ajoutant le selected :

Code:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<title>Nouvelle page 1</title>
<style type="text/css">
table {width:100%;
	border-collapse:collapse;}
td {border: solid 1px grey:
}
</style>
<script type="text/javascript">
(function($) {
        $.fn.ColorTableRows = function(params) {
        var defaut={"evenColor":'#FFFCD2',"oddColor": '#FFF778', "hoverColor":'#FFA64F', selectedColor:"red"};
        var opts= $.extend(defaut,params)
 
  		 var newstyle = $('<style type="text/css">.odd{ background-color:'+opts.oddColor+' !important;}.even{ background-color:'+opts.evenColor+' !important;}.hover{ background-color:'+opts.hoverColor+' !important;}.selected{ background-color:'+opts.selectedColor+' !important;}</style>');	
  		 $('head').append(newstyle)
 
        $(this).find('tr:even').addClass('even');
        $(this).find('tr:odd').addClass('odd');
        $(this).find('tr').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');}).click(function(){$(this).toggleClass('selected')})
 
 
        };
})(jQuery);
 
 
$(function(){
 $("#foo").ColorTableRows({hoverColor:"orange",selectedColor:'lime'}) })
</script>
 
</head>
 
<body>
<table id="foo">
	<tr>
		<td>&nbsp;h</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
</table>
</body>
 
</html>

pour aller un peu plus loin:

Code:

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
81
82
83
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<title>Nouvelle page 1</title>
<style type="text/css">
table {width:100%;
	border-collapse:collapse;}
td {border: solid 1px grey;
}
</style>
<script type="text/javascript">
(function($) {
        $.fn.ColorTableRows = function(params) {
        var defaut={	firstLine:"#FFA200", //couleur de la première ligne 
        				firstCol:"#FFC055",  //couleur de la première colonne
        				firstWidth: 100,
        				"evenColor":'#FEFF00', //couleur des lignes paires
        				"oddColor": '#C9CA35', //couleur des lignes impaires 
        				"hoverColor":'#FFD4FE', //couleur au survol
        				selectedColor:"#D500D0" // couleur de selection
         				};
        var opts= $.extend(defaut,params)
 
  		 var newstyle = $('<style type="text/css">.odd{ background-color:'+opts.oddColor+' !important;}.even{ background-color:'+opts.evenColor+' !important;}.hover{ background-color:'+opts.hoverColor+' !important;}.selected{ background-color:'+opts.selectedColor+' !important;}.firstLine{ background-color:'+opts.firstLine+' !important;}.firstCol{ background-color:'+opts.firstCol+' ;}</style>');	
  		 $('head').append(newstyle)
 
        $(this).find('tr:eq(0)').addClass('firstLine');
        $(this).find('tr:gt(0)').find('td:first').addClass('firstCol')
		$(this).find('tr:gt(0)').find('td:first').css({width:opts.firstWidth +"px"})
        $(this).find('tr:gt(0):even').find('td:gt(0)').addClass('even');
        $(this).find('tr:gt(0):odd').find('td:gt(0)').addClass('odd');
        $(this).find('tr:gt(0) td').hover(function(){$(this).parent('tr').find('td').addClass('hover');},function(){$(this).parent('tr').find('td').removeClass('hover');}).click(function(){$(this).parent('tr').find('td').toggleClass('selected')})
 
 
        };
})(jQuery);
 
 
$(function(){
 $("#foo").ColorTableRows()
 })
</script>
 
</head>
 
<body>
<table id="foo">
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
		<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
 
</table>
</body>
 
</html>