Discussion :

[kernelfailure]

lol

Et ça a été chaud à trouver. Je suis parti du DOM pour finalement en arriver là. La plupart des exemples que je trouvais ne fonctionnaient pas pour créer du CSS à la volée, et les indications de microsoft eux-mêmes étaient loi d'être valable.

L'astuce consiste à attacher un behavior à un ou des éléments en utilisant les selecteurs DOM.
Un behavior, est une propriété dynamique, un comportement.

La première chose était de pouvoir créer du CSS dynamiquement :

Code :

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

document.createStyleSheet()

Pour ajouter une ou des règle(s):

Code :

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

document.createStyleSheet().addRule(selector,cssProperties);

En suite, à l'aide de l'attribut behavior:, on va pouvoir changer le comportement des éléments résultant du sélecteur (ici '*', c'est à dire tous).

Le comportement est ici d'ajouter de nouvelles propriétés à tous les éléments du DOM : getElementsByNode(Name|Type), en faisant le binding sur le nouveau prototype d'Element (qui, sous IE7, n'est pas un objet reconnu). Ce binding peut se faire via HTC (url) ou via du code (expression).

Code :

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

1
2
3
<style>
* {behavior: expression(...)}
</style>

Nouvelle astuce : comment empiler plusieurs instructions ?
A l'aide de "void(...) || void(...)" : Au moins une évaluation doit être vraie. Comme le résultat est tout le temps 'undefined' on est sur que toutes seront évalué.

Code :

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

* {behavior: expression(void(...)||void(...)...)}

N.B : Un seul behavior par element, le point-virgule sépare les attributs CSS

Il n'y a plus qu'à décorer les éléments en faisant le binding :

Code :

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

void(this.property = function(){return bind.apply(this, arguments)})

Le reste, c'est CSS qui s'en occupe.
(En théorie, Pour mieux comprendre) :

Code :

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

void(this.width = parseCSSInt(this.height) * 2 + 'px') || void(this.height = this.nexSibling != null ? this.nextSibling.style.height : '20px')

Fait que un élément aura sa largeur 2 fois plus grande que sa hauteur. Sa hauteur étant la même que l'élément suivant de même parent ou de 20pixels par défaut. parseCSSInt serait une fonction qui ferait ce qu'elle semble indiquer. (Pas sur avec le trinaire à cause de ':').



Il y a une gestion de synchronisation à s'assurer avec behavior :
element.onreadystatechange = functionHandle || anonymous;
<SCRIPT FOR = object EVENT = onreadystatechange>

element.readyState == 'uninitialized' || 'loading' || 'loaded' || 'interactive' || 'complete'

C'est ce sur quoi je me penche actuellement.

[kernelfailure]

Bon bah...
Ca fonctionne !
(J'ai des gros problèmes de cache que j'ai du mal à expliquer)

Element.prototype.js :

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
if (!window.Element) { //IE7 hack
	Element = function(){};
   document.createStyleSheet().addRule('*', 'behavior: expression( void(this.getElementsByNodeName = function(){return Element.prototype.getElementsByNodeName.apply(this, arguments)}) || void(this.getElementsByNodeType = function(){return Element.prototype.getElementsByNodeType.apply(this, arguments)}) )');
}
 
Element.prototype.getElementsByNodeName = function (nodeName) {
	var list = new Array();
	list.item = function(i) { return this[i] };
 
	for (var children=this.childNodes, i=0, n=children.length; i<n; i++) {
		var item = children.item(i);
		if (item.nodeName == nodeName) list.push(item);
		if (item.childNodes.length > 0) list = list.concat(item.getElementsByNodeName(nodeName));
	}
 
	return list;
};
 
Element.prototype.getElementsByNodeType = function (nodeType) {
	var list = new Array();
	list.item = function(i) { return this[i] };
 
	for (var children=this.childNodes, i=0, n=children.length; i<n; i++) {
		var item = children.item(i);
		if (item.nodeType == nodeType) list.push(item);
		if (item.childNodes.length > 0) list = list.concat(item.getElementsByNodeType(nodeType));
	}
 
	return list;
};

Finalement, dans le HTML, "onreadystatechange" n'est pas utile pour IE7, le "onload" venant immédiatement après. Mais, sous IE7, l'un ou l'autre sont obligatoire pour le déclenchement des opérations liées aux méthodes getElementsByNode"something" ci-dessus :

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
...
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<script type="text/javascript" src="Element.prototype.js"></script>
<script type="text/javascript">
function MAIN() {
	var mbody = document.getElementsByTagName('BODY')[0];
 
	var txt = mbody.getElementsByNodeName('#text');
	if (document.readyState && document.readyState != 'complete') return;
 
	var str = '';
	for (var i=0, n=txt.length; i<n; i++)
		if (txt[i] != null && txt[i].data != null) str += txt[i].data;
 
	alert(str.replace(/[\s]+/g,' '));
};
</script>
</head>
<body onload="MAIN()">
...

Si quelqu'un connait le prototype de Element sous IE7, je serais très intéressé.

[PierrotY]

... ... mais qu'est-ce que vous êtes bavards! Il faut être archéologue pour trouver la version finale de la solution, mais je pense que je devrais m'en sortir

Bon, mais en tout cas ça correspond parfaitement à ce que je cherche. Que le grand WEB2.0 vous en remercie !!

[SpaceFrog]

http://jsfiddle.net/5z3eR/

[PierrotY]

Si ça vous intéresse...

vCSV: transforme un tableau HTML (entête dans thead et corps dans tbody) au format CSV. Si un champ mail est rencontré, on extrait le href (expRegMail). Si une balise <a> est rencontrée, elle est ignorée (expReg).

idTable: id du table
iDeb: numéro de la première colonne à examiner
iFin: numéro de la dernière colonne à examiner

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
function vCSV(idTable, iDeb, iFin) { // iDeb commence à 0 ;)
 
  var strCSV = '';
  var strSeparateur = ';';
  var i = 0;
  var expRegMail = /<a href="mailto:(.*)">.*<\/a>/g; // Extraction des emails
  var expReg = /<a.*>.*<\/a>/g; // Tout ce qui est dans des balises a
  // Récupération de l'entête du tableau
  $(idTable).find('thead').each(function(){
    $(this).find('th').each(function(){
      if (i >= iDeb && i <= iFin) strCSV += $.trim($(this).html()).replace(expReg, '')+strSeparateur;
      i++;
    });
    strCSV += '\n';
  });
 
  // Récupération de chaque ligne
  $(idTable).find('tbody').find('tr').each(function(){
    i = 0;
    $(this).find('td').each(function(){
      // if (i >= iDeb && i <= iFin) strCSV += $.trim($(this).html()).replace(expReg, '')+strSeparateur;
      if (i >= iDeb && i <= iFin) strCSV += $.trim($(this).html()).replace(expRegMail, '$1').replace(expReg, '')+strSeparateur;
      i++;
    });
    strCSV += '\n';
  });
 
  // Création temporaire et artificielle d'une balise a pour utiliser l'attribut download afin de préciser le nom du fichier... si quelqu'un trouve mieux, je suis preneur!
  // solution trouvé sur le net... mais je ne sais plus où
  var tmpA = document.createElement("a");
  tmpA.href = 'data:text/csv;charset:UTF-8,'+encodeURIComponent(strCSV);
  tmpA.download = "tableau.csv";
 
  document.body.appendChild(tmpA);
  tmpA.click();
  document.body.removeChild(tmpA);
 
}

La solution de passer par une balise <a> temporairement n'est pas bien jolie mais je n'ai pas trouvé mieux. L'avantage ici est qu'aucune connexion au serveur n'est effectuée. Étant donné que toutes les données sont sur la page, c'eut été ballot de faire le boulot en PHP... et donc faire travailler les serveurs
Bien entendu, si vous trouvez à redire sur mon code javascriptoajax, je suis tout ouï.

A+