creation de rules css avec jquery en runtime

**SpaceFrog** · 26/07/2011, 11h07

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 :

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
<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 ?

Invité · 26/07/2011, 11h24

salut,

je pense que quand tu fais

Code :

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

        $(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 :

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

$('<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

**SpaceFrog** · 26/07/2011, 11h29

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

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

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
<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

**SpaceFrog** · 26/07/2011, 12h03

en y ajoutant le selected :

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
<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>

**SpaceFrog** · 26/07/2011, 13h42

pour aller un peu plus loin:

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
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>

creation de rules css avec jquery en runtime

jQuery

Vue hybride

Discussions similaires

Partager

Partager