Bonjour j'ai effectue une rapide recherche sur les forums et je n'ai pas trouve de topic sur le sujet qui me turlupine...

En fait j'aimerai transporter tout le style (enfin je suppose) d'un objet DOM a un autre.

J'explique plus en detail.

Mon but est de realiser une scroll table qui marcherai dans la plupart des browsers internet, du moins ceux que jQuery supporte.

Mon code se base donc sur jquery.

Pour avoir la scrollbar verticale avec le header fixe et compatible ds tous les browsers, plutot que d'utiliser des styles bidons qui buggent pour x ou y raisons (cf la -moz-vertical-scrollbar qui me donnait des lignes immobiles l'autre jour)... je recherche les dimensions de chacune de mes colonnes en largeur, et je pose mon header et mon body ds des divs separes.
Ensuite j'ajuste les dimensions des colonnes grace aux dimensions mesurees precedemment, et finalement j'ajuste la taille du div qui entoure le body.

En theorie ca doit pouvoir marcher,mais j'ai un petit probleme.

Lorsque je detruit la structure initiale de la table les styles partent completement en cacahuete...
Je voudrais donc recuperer les styles de thead/tbody/tfoot, et des lignes associees puis les transporter sur les nouveaux thead/tbody/tfoot qui sont dans des divs separes, avant de reajuster les largeurs des colonnes.

Quelqu'un verrait il comment faire ?

pour l'instant j'ai fait une fonction get/set css pour jquery ds le style ci-dessous.

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
 
      /**
	 * returns the whole css array of the first element...
	 *
	 * @param {Integer} i
	 */
	$.fn.getCss = function(){
		var cssArray = [];
		var i=0;
		if( this.size()>0){
			var tmp = this.get(0).style;
 
			for (var style in tmp) {
				var value = this.css(style);
				cssArray[style] = value;
			}
		}
		console.log(cssArray.length);
		return cssArray;
	}
	/**
	 * returns the element at pos i...
	 *
	 * @param {Integer} i
	 */
	$.fn.setCss = function( cssArray ){
		return this.each(function(){
			for( var style in cssArray ){
				try {
					$(this).css(style, cssArray[style]);
				} 
				catch (e) {
				}
			}
		}); 
	}
Mais les resultats ne sont pas satisfaisants... (le console.log c parce que c'est en cours de debug...).

Pour vous donner une idee du code voila ma fonction actuelle pour creer le scroll (c pas fini):

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
 
 
		this.buildscroll = function(){
				var tmphtml='';
				var styles = {
					table:this.getCss()
				};
				if(this.thead().size()>0){
					$.extend( styles , 
					{
						thead: this.thead().getCss(),
//						thead_tr: this.thead().rows().getCss(),
						thead_tr: this.thead().rows().at(0).cells().getCss()
					});
				}
				if(this.tbody().size()>0){
					$.extend( styles , 
					{
						tbody: this.tbody().getCss(),
//						tbody_tr: this.tbody().rows().getCss(),
						tbody_tr: this.tbody().rows().at(0).cells().getCss()
					});
				}
				if(this.tfoot().size()>0){
					$.extend( styles , 
					{
						tfoot: this.tfoot().getCss(),
						tfoot_tr: this.tfoot().rows().getCss(),
						tfoot_td: this.tfoot().cells().getCss()
					});
				}
 
				//1. get column sizes:
				var titlerow = this.thead().find('.titlerow');
				var titlerow_cells = titlerow.cells();
				var col_widths = [];
				var width = this.width(); 
 
				for(var i=0; i<titlerow_cells.size();i++){
					col_widths[i]= titlerow_cells.at(i).outerWidth(true);
				}
 
				//2. Save then remove head & body, put a new body.
				var tbody=this.tbody().clone();
				var thead=this.thead().clone();
				this.thead().remove();
				tmphtml = 	'<tbody style="width:100%;height:100%;border-collapse:collapse;" class="control wrap">'
								+'<tr style="width:100%;height:100%;border-collapse:collapse;" class="control wrap">'
									+'<td style="width:100%;height:100%;border-collapse:collapse;" class="control wrap"> '
									+'</td>'
								+'</tr>'
							+'</tbody>';
				this.tbody().replaceWith(tmphtml);
 
				//3. Set back header and body in 2 different divs.
 
				this.find('td.control.wrap')
				.append(	'<div class="thead wrap control" style="margin:0px;width:100%;height:auto;border-collapse:collapse;">'
								+ 	'<table class="thead wrap control" style="width:100%;height:auto;border-collapse:collapse;">'
								+   '</table>'
							+ '</div>');
				this.find('table.thead.control.wrap').html(thead);
				this.css('border-collapse','collapse');
				this.thead().rows().cells().setCss(styles.thead_td);
				this.thead().rows().setCss(styles.thead_tr);
				this.thead().setCss(styles.thead);
 
				this.find('td.control.wrap')
				.append(	'<div class="tbody wrap control" style="margin:0px;width:100%;height:auto;border-collapse:collapse;">'
							+ 	'<table class="tbody wrap control" style="width:100%;height:auto;border-collapse:collapse;">'
							+   '</table>'
							+ '</div>');
 
				this.find('table.tbody.control.wrap').html(tbody);
				this.css('border-collapse','collapse');
				this.tbody().setCss(styles.tbody);
				this.tbody().rows().setCss(styles.tbody_tr);
				this.tbody().rows().cells().setCss(styles.tbody_td);
 
...
Normalement le but de la manip c d'avoir wrappe le tbody et le thead de la table initiale dans 2 divs separes... en gardant les styles de la table initiale...

Voila alors je pensais a une autre solution qui ne marcherait surement pas, ce serait peutetre de recharger le css apres la modification si c possible? A moins que ce soit fait automatiquement ?

Quelqu'un comprend le probleme...?

Merci d'avance.