[jQuery] Proposition de plugin pour colorisation de lignes de tableau + effet hover et select

**SpaceFrog** · 26/07/2011, 15h15

rien de tel qu'une petite demo pour voir le principe
http://sk-martin.developpez.com/Arti.../tablerows.htm

Ce plugin applique juste les modifications de base de style et d'effet hover et select, je travaille actuellement sur la possibilité de rendre le select multiple ou unique, et retourner une sélection

Testé sous ffx, IE, Opéra, Chrome, Lunascape

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<title>Table Row Syling</title>
<style type="text/css">
body {background-color: #84DC81}
p {font-family: arial;}
table {width:100%;
	border-collapse:collapse;
	background-color:#ffffff;}
td {border: solid 1px grey;
     width:20%;
}
 
#bar td {width:16%;}
</style>
<script type="text/javascript">
//<![CDATA[
 
 /*
 * Yet another one dreamt by SpaceFrog
 *
 * L'auteur décline toutes responsabilités !
 * ------------------------------------------
 *
 * Code by  SpaceFrog
 * 
 * Plugin jquery.ColorTableRows-1.0.0.js
 *
 * Version v1.0.0 2011-07-26
 * ------------------------------------------
 * Usage :
 *
 * $("#tableID").ColorTableRows({param1:'value1',parm2:value2);
 * à noter que value2 peut etre un json dans le cas de tableCss
 *
 * On peut traiter plusieurs tables en même temps 
 *      $("table").ColorTableRows();
 * ------------------------------------------*/
 
(function($) {
 
        $.fn.ColorTableRows = function(params) {
 
        defaut={	lineHead:true,			//ligne d'entête
        		lineHeadBold:false,		//gras ligne d'entête
        		colHead:true,			//colonne d'entête	
        		firstLine:"#FFA200", 	//couleur de la première ligne
			firstCol:"#FFC055",  	//couleur de la première colonne
			firstColBold:false,  		//gars de la première colonne
        		firstWidth: 100,		//largeur de première colonne
        		evenColor:'#FEFF00', 	//couleur des lignes paires
        		oddColor: '#C9CA35', 	//couleur des lignes impaires 
        		enableHover:true,		//activer le hover
        		hoverColor:'#FFFFAA', 	//couleur background au survol
			hoverFontColor:'#000000',		//couleur de police au survol
			hoverFontBold:false,		//gras de police au survol
        		enableSelect:true,		// activer la selection
        		selectedColor:"#D500D0",// couleur de selection
			selectedFontColor:"",
        		borderWidth: 1,		//largeur de bordure	
        		borderColor: 'grey',		// epaisseur de bordure
        		tableCss : {}			//css general
         				};
        //modification des parmètres
      	 this.opts= $.extend(defaut,params);
 
        //creation des rules css (classes)
        this.fixrule =$('table').index($(this));//$(this).attr('id');
        var newstyle = $('<style type="text/css">.odd'+this.fixrule+'{ background-color:'+this.opts.oddColor+';}.even'+this.fixrule+'{ background-color:'+this.opts.evenColor+';}.firstCol'+this.fixrule+'{ background-color:'+this.opts.firstCol+' ;} .hover'+this.fixrule+'{ background-color:'+this.opts.hoverColor+' ;color:'+this.opts.hoverFontColor +'; font-weight:'+((this.opts.hoverFontBold)?'bold':'normal')+';}.selected'+this.fixrule+'{ background-color:'+this.opts.selectedColor+' !important;color:'+this.opts.selectedFontColor+';}.firstLine'+this.fixrule+'{ background-color:'+this.opts.firstLine+';}</'+'style>');	
	$('head').append(newstyle);
 
	//attribution des classes, hover et selected :
	//border
	 $(this).find('td').css({"border-width": this.opts.borderWidth, borderColor:this.opts.borderColor});
	 //Css général du tableau
	 $(this).css(this.opts.tableCss);
	 //style de la première ligne
        $(this).find('tr:eq(0) td').addClass((this.opts.lineHead)?'firstLine'+this.fixrule:'odd'+this.fixrule);
	if(this.opts.lineHeadBold){ $(this).find('tr:eq(0)').css({'font-weight':'bold'}) }
 
	//gras de première colonne
	 if(this.opts.firstColBold){ $(this).find('tr').find('td:eq(0)').css({'font-weight':'bold'}) } 
        //largeur première colonne
	$(this).find('tr:gt(0)').find('td:first').css({width:this.opts.firstWidth });
 
	//coloriser une ligne sur deux
	$(this).find('tr:gt(0):even').find('td').addClass('even'+this.fixrule);
	$(this).find('tr:gt(0):odd').find('td').addClass('odd'+this.fixrule);
 
	//style de première colonne
	var fixclass=this.fixrule;
	var sel=(this.opts.lineHead)?'tr:gt(0)':'tr';
	 if (this.opts.colHead) { $(this).find(sel).find('td:eq(0)').addClass('firstCol'+fixclass);}
  	 //gestion du hover 	                                  
         if(this.opts.enableHover){
	            $(this).find(sel).hover( function(){ $(this).closest('tr').children('td').toggleClass('hover'+fixclass);}
		);
        	}
 
	//gestion du select	
        if(this.opts.enableSelect){
		$(this).find(sel).click(function(){$(this).closest('tr').children('td').toggleClass('selected'+fixclass);});
        	}
	 }
 
})(window.jQuery)
 
$(function(){
	$("#launch").one('click',launchplugin)
	})
function launchplugin(){
 $("#foo").ColorTableRows({selectedFontColor:"#ffffff"});
 $("#bar").ColorTableRows({firstWidth:'8%',firstLine:'#FF0000',evenColor:'#AD55FF', oddColor:'pink' , enableSelect:false, hoverColor:'lime',hoverFontColor:'red',hoverFontBold:true, borderColor:'black'});
 $("#toc").ColorTableRows({firstWidth:'10%' ,lineHead:false,evenColor:'dimgrey',oddColor:'grey', selectedColor:'#FF0000',tableCss:{color:'white', 'font-family':'verdana', 'font-size':'12px','line-height':'25px'},lineHeadBold:true,hoverFontColor:'#000000'});
 $(".tic").ColorTableRows({evenColor:'#CFFBFF',oddColor:'#CFE9FF',firstCol:'#247ECB',firstLine:"#247ECB",borderWidth:0,firstColBold:true,tableCss:{border:'solid 2px navy','font-family':'verdana','font-size':'10px', width:"80%", margin:'auto'},hoverColor:'navy',hoverFontColor:'#ffffff',selectedFontColor:"#E8FD01"});
 $("#tac").ColorTableRows({ enableHover:false,firstCol:false});
}
//]]>
</script>
</head>
<body>
<div>
<p>
 
SpaceFrog's TableRows JQuery Plugin
Ce plugin est destiné à l'embellissement des tableaux afin d'améliorer leur lisibilité<br/>
Ci-dessous un ensemble de tableaux bruts. <br/>
Cliquez sur le bouton pour voir le plugin en action 
<input type="button"  id="launch" value="appliquer le plugin" />
<br/>
</p>
<table id="foo">
	<tr>
		<td>contenu</td>
		<td>$("#foo").ColorTableRows();</td>
 
		<td>contenu</td>
	</tr>
		<tr>
		<td>contenu</td>
		<td>Style et effets par défaut sur id </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>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
 
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
 
</table>
<br/>
<table id="bar">
	<tr>
		<td>contenu</td>
		<td>$("#bar").ColorTableRows({firstWidth:'5%',firstLine:'#FF0000',evenColor:'#AD55FF', oddColor:'pink' ,enableSelect:false, hoverColor:'lime', borderColor:'black'});</td>
		<td>contenu</td>
		<td>contenu</td>
 
		<td>contenu</td>
		<td>contenu</td>
	</tr>
		<tr>
		<td>contenu</td>
		<td>Style et effets personalisés sur id </td>
		<td>contenu</td>
 
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
 
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
 
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
 
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
 
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
 
		<td>contenu</td>
		<td>contenu</td>
	</tr>
</table>
<br />
<table id="toc">
	<tr>
		<td>contenu</td>
		<td>contenu</td>
 
		<td>contenu</td>
	</tr>
		<tr>
		<td>contenu</td>
		<td>$("#toc").ColorTableRows({firstWidth:'auto' ,lineHead:false,evenColor:'dimgrey',oddColor:'grey', selectedColor:'#FF0000',tableCss:{color:'white', 'font-family':'verdana', 'font-size':'12px','line-height':'20px'},lineHeadBold:true});</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><br />
<table class="tic">
 
	<tr>
		<td>contenu</td>
		<td>Style et effet personnalisés sur class</td>
		<td>contenu</td>
	</tr>
		<tr>
		<td>contenu</td>
 
		<td>$(".tic").ColorTableRows({evenColor:'#CFFBFF',oddColor:'#CFE9FF',firstCol:'#247ECB',firstLine:"#247ECB",borderWidth:0,firstColBold:true,tableCss:{'font-family':'verdana'}});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><br />
<table class="tic">
	<tr>
		<td>contenu</td>
		<td>Style et effet personnalisés sur class</td>
		<td>contenu</td>
 
	</tr>
		<tr>
		<td>contenu</td>
		<td>$(".tic").ColorTableRows({evenColor:'#CFFBFF',oddColor:'#CFE9FF',firstCol:'#247ECB',firstLine:"#247ECB",borderWidth:0,firstColBold:true,tableCss:{'font-family':'verdana'}});</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>
<br />
<table id="tac">
	<tr>
 
		<td>contenu</td>
		<td>Style et effet par defaut sur id sans hover mais avec select</td>
		<td>contenu</td>
	</tr>
		<tr>
		<td>contenu</td>
		<td></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>
</div>
</body>
</html>

Désolé pour le look disco 80's, je suis allé à l'essentiel pour montrer le principe de base et je ne suis pas graphiste, mais je fais confiance a votre imagination pour jouer avec des styles plus modernes :red:

**gwinyam** · 26/07/2011, 17h58

Ton plugin ne fait pas que changer les couleurs des lignes d'un tableau ? Si j'ai bien lu ton code, il prend carrément la main sur le style des tableaux, c'est bien ça ? Ton titre est du coup trompeur si je ne me trompe pas.

**SpaceFrog** · 26/07/2011, 18h35

oui enfin il permet de styliser le tableau en entêtes de ligne et colonne + ajoute d'effet hover et select ...

[jQuery] Proposition de plugin pour colorisation de lignes de tableau + effet hover et select

Contribuez

Discussions similaires

Partager

Partager