Exporter une <table> vers fichier CSV

Version imprimable

08/12/2009, 18h20
sebhm

Exporter une <table> vers fichier CSV

Bonjour,

je souhaite réaliser (trouver ? :aie:) une fonction javascript/Ajax qui me permettrait d'enregistrer un fichier CSV contenant les données de ma table HTML.

a priori :
(à partir d'un ID d'une table HTML)
- parse la table
- ecrit dans un textarea caché ou une variable le contenu du CSV
- uploade le CSV via AJAX (parce qu'on va avoir du mal à créer un fichier depuis le client)
- crée le fichier (PHP)
- le propose au téléchargement (re AJAX)

j'ai vu quelques trucs intéressants en cherchant, comme la table éditable de bigboomshakala, mais la table est créée en javascript, ce qui n'est pas mon cas.

D'autres ont deja posé la question, et on leur a répondu (à juste titre)
"crée ton fichier en PHP !! "

mes arguments : :mrgreen:
- j'ai toute une application pleine de tableaux à rendre exportables (donc soit je me les tape tous en PHP, soit une superbe fonction javascript prend juste un id en entrée et ca roule)
- ca me permet de ne pas stocker les pages CSV inutiles (oui c'est vrai, je peux les supprimer la nuit si ca m'embete...) (il me fallait au moins un second argument à part la flemmingite)

merci de ne pas taper trop fort !

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
<script type='text/javascript'>
function  createCSV(obj){
var tab=document.getElementById(obj)
var Tablignes =tab.getElementsByTagName('tr')
 
var CSVText=""
var x=0;
 
while(Tablignes[x]){
	TabCol=Tablignes[x].getElementsByTagName('td')
	var ArrLine=new Array()
	var y=0;
	while (TabCol[y]){
		ArrLine.push(TabCol[y].innerHTML);
		y++
		}
		CSVText+='"'+ArrLine.join('";"')+'"\n'
		x++
	}
alert	(CSVText)
}
 
</script>
</head>
 
<body onload="createCSV('tableau')">
 
<table id="tableau" border="1" width="100%">
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
</table>
 
</body>

suffit e,suite de faire le send ajax qui pointe sur une page php qui retourne un header de fichier csv et qui fait un echo de ce qu'il reçoit ...

le fichier qui envoie les données:

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>un</title>
<script type='text/javascript'>
function  createCSV(obj){
var tab=document.getElementById(obj)
var Tablignes =tab.getElementsByTagName('tr')
 
var CSVText=""
var x=0;
 
while(Tablignes[x]){
	TabCol=Tablignes[x].getElementsByTagName('td')
	var ArrLine=new Array()
	var y=0;
	while (TabCol[y]){
		ArrLine.push(TabCol[y].innerHTML);
		y++
		}
		CSVText+=ArrLine.join('\t')+'\n'
		x++
	}
document.getElementById("csvText").value=CSVText
document.forms[0].submit();
}
 
</script>
</head>
 
<body onload="createCSV('tableau')">
 
<table id="tableau" border="1" width="100%">
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
</table>
<form action="csvexport.php" method="post">
<input type="hidden" name="csvText" id="csvText"/>
</form>
 
</body>
 
</html>

le php qui retourne le csv:

Code:

1
2
3
4
5
<?php
header ("Content-Type: application/vnd.ms-excel");
header("Content-disposition: attachement; filename=\"fichier.csv\""); 
echo ($_POST['csvText']);
?>

en fait il faut doubler les " dans les cellules

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
<script type='text/javascript'>
function  createCSV(obj){
var tab=document.getElementById(obj)
var Tablignes =tab.getElementsByTagName('tr')
 
var CSVText=""
var x=0;
 
while(Tablignes[x]){
	TabCol=Tablignes[x].getElementsByTagName('td')
	var ArrLine=new Array()
	var y=0;
	while (TabCol[y]){
		ArrLine.push(TabCol[y].innerHTML.replace(/"/g,'""'));
		y++
		}
		CSVText+='"'+ArrLine.join('","')+'"\r\n'
		x++
	}
document.getElementById("csvText").value=CSVText
 
document.forms[0].submit();
}
 
</script>

ensuite en fonction des versions d'excel le séparateur peut être , ; voire \t

merci docteur, combien je vous dois ?

:lahola:

c'est quasi parfait.

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>un</title>
<script type='text/javascript'>
function  createCSV(obj){
var tab=document.getElementById(obj);
var Tablignes =tab.getElementsByTagName('tr');
 
var CSVText="";
var x=0;
 
while(Tablignes[x]){
	TabCol=Tablignes[x].getElementsByTagName('td');
	var ArrLine=new Array();
	var y=0;
	while (TabCol[y]){
		ArrLine.push(TabCol[y].innerHTML+';');
		y++;
		}
		CSVText+=ArrLine.join('\t')+'\n';
		x++;
	}
document.getElementById("csvText").value=CSVText;
document.forms[0].submit();
}
 
</script>
</head>
 
<body>
 
<table id="tableau" border="1" width="100%">
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
</table>
 
<p>
<button onclick="createCSV('tableau')">EXPORTER en CSV</button>
</p>
 
<form action="csvexport.php" method="post">
<input type="hidden" name="csvText" id="csvText"/>
</form>
 
</body>
 
</html>

j'ai juste mis un bouton pour lancer la génération du fichier (ca c'est mon niveau :aie:)
Je mets le séparateur ';' entre chaque cellule.

ben c'est super !! :ccool:

PS : marrant cette habitude que tu sembles avoir de ne pas mettre les ';' apres les instructions javascript

Merci encore

08/12/2009, 22h10
sebhm

Code:

TabCol=Tablignes[x].getElementsByTagName('td');

on peut trouver des <td> ou des <th>, comment gérer cela quand on ne sait pas dans quel ordre ca peut arriver ??

eventuellement gérer les cellules fusionnées ?

et existe-t-il une fonction DOM pour tester si c'est un noeud texte à l'interieur de la cellule ?
(y'a parfois des images dans les cellules, qui n'ont rien à faire dans le CSV)

Pour connaitre le type, il faut tester nodeType.
La fusion des colonnes et lignes, il faut tester colSpan et rowSpan.

Une petite démonstration sans prétention :
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 <html> <head> <script> function tell (oid) { var trs = document.getElementById(oid).getElementsByTagName('TR'); for (var i=0, n=trs.length; i<n; i++) { for (var j=0, m=trs[i].childNodes.length; j<m; j++) { alert('c: ' + trs[i].childNodes[j].colSpan + ', r: ' + trs[i].childNodes[j].rowSpan); for (var k=0, l=trs[i].childNodes[j].childNodes.length; k<l; k++) { if (trs[i].childNodes[j].childNodes[k].nodeType == 3) alert(trs[i].childNodes[j].childNodes[k].data); } } } } </script> </head> <body onload="tell('tintin')"> <table border=1 id="tintin"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5<br />6</td></tr> <tr><td>10</td><td>12</td><td>13</td><td>14</td><td>15<div>16</div></td></tr> <tr><td>21</td><th colspan=2>22/23</th><td>24</td><td>25</td></tr> </table> </body> </html>
Je récupère les items 'TR' ;
Je parcoure tous les enfants de chaque 'TR', scannant les colS et rowS ;
Pour chacun de ses enfants, je scan tous les noeuds de type texte.

A noter :
- Ligne 1 : 5<br />6. '5' et '6' seront affichés ;
- Ligne 2 : '16' est pris dans un enfant DIV. Il ne sera pas affiché ;
- Ligne 3 : un TH en colspan=2. Inexploité, mais parcouru :aie:.

Puisse ceci te donner des pistes ;)

Dans ce cas, je procéderais de la sorte :

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
 
function toCSV(id) {
    var table = document.getElementById(id);
    if( ! table) return false;
 
    var row, cell;
    var content = new Array();
    var CSV = '';
 
    for (var i = 0, rows = table.rows.length; i < rows; i++) {
        row = table.rows[i];
        for (var j = 0, cells = row.cells.length; j < cells; j++) {
            cell = row.cells[j];
 
            if(cell.hasChildNodes()) {
                var element = cell.firstChild; // Recherche d'une balise interne s'il y a
                while (element && element.nodeType != 1) {
                    element = element.nextSibling;
                }
 
                if( ! element || element.tagName.toLowerCase() !== 'img') { // S'il y a une balise interne, on verifie si ca n'est pas une image
                    content.push(cell.innerHTML);
                }
            }
        }
        CSV += '"' + content.join(';').replace(/"/g, '""') + '"\r\n';
        content.length = 0;
    }
 
    return CSV;
}

merci vraiment pour votre aide à tous.

j'en suis là :
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 function createCSV(id) { var table = document.getElementById(id); if( ! table) return false; var row, cell; var content = new Array(); var CSV = ''; var cellContent=new Array(); var cell_parsed=0; for (var i = 0, rows = table.rows.length; i < rows; i++) { row = table.rows[i]; for (var j = 0, cells = row.cells.length; j < cells; j++) { cell = row.cells[j]; if(cell.hasChildNodes()) { for (k=0;k<cell.childNodes.length;k++) { if (cell.childNodes[k].nodeType==3) { cellContent.push(cell.childNodes[k].nodeValue); cell_parsed++; } } if (cell_parsed==0) content.push(''); else content.push(cellContent.join(' ')); cellContent.length = 0; cell_parsed=0; } } CSV += content.join(';') + "[[RC]]"; content.length = 0; } //return CSV; document.getElementById("csvText").value=CSV; document.getElementById("form_export_csv").submit(); }
je m'explique :
je parcours le tableau avec table.rows et rows[i].cells, ce qui me permet de ne pas me soucier des <td> ou des <th>.
je teste le type des noeuds afin de ne trouver que les noeuds Texte.
Ainsi, un contenu '13 <br /> 14' donnera dans le CSV '13 14'.
De plus, nodeValue va m'écrire des caracteres 'normaux' à la place des entités HTML (  é ...)
Et si je n'ai aucun noeud fils Texte (on n'a qu'une image), je le detecte et j'ecris un champ vide pour garder ma mise en forme dans mon CSV.
Le retour à la ligne ne fonctionne pas dans mon fichier CSV (il veut pas comprendre '\n' ou '\r\n' une fois passé la main à PHP). J'ai donc feinté en insérant une chaine particuliere ([[RC]]) que je transforme en PHP.

ce qu'il me reste à gérer :
- detecter les colspan rowspan
- aller lire dans les balises contenues dans les cellules si il y a des champs texte

Code:

<td>toto<br />tata</td>

donne bien 'toto tata'
mais

Code:

<td>toto<span>tata</span></td>

ne donne que 'toto'
- et p'etre d'autres trucs ...

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
function createCSV(id) {
    var table = document.getElementById(id);
    if( ! table) return false;
 
    var row, cell;
    var content = new Array();
    var CSV = '';
    var cellContent=new Array();
 
    for (var i = 0, rows = table.rows.length; i < rows; i++) {	//parcours lignes
        row = table.rows[i];
        for (var j = 0, cells = row.cells.length; j < cells; j++) {	//parcours cellules
	    cell = row.cells[j];
            if(cell.hasChildNodes()) {	//si y'a du monde dans la cellule
				//noeuds fils
				noeuds_texte_fils(cell, cellContent);
 
				//contenu de la cellule vers CSV
				if (cellContent.length==0)	//si rien (<td><img ... /></td>dans la cellule : case vide CSV
					content.push('');
				else	//contenu ok
					content.push(cellContent.join(' '));
 
				cellContent.length = 0;
            }
			else	//si rien (<td></td>) dans la cellule : case vide CSV
				content.push('');
			//gestion colspan	
			if (cell.colSpan > 1)
				for(var c=1;c<cell.colSpan;c++)
					content.push('');
 
        }
		//retour chariot apres une ligne
        CSV += content.join(';') + "[[RC]]";
        content.length = 0;
    }
 
	//on envoie
	document.getElementById("csvText").value=CSV;
	document.getElementById("form_export_csv").submit();
}
 
/*recherche des noeuds texte fils pour former une chaine de caractere*/
function noeuds_texte_fils(node, tabtxt) {
	for (var k=0;k<node.childNodes.length;k++) {	//on cherche les noeuds textes
		if (node.childNodes[k].nodeType==3) {
			tabtxt.push(node.childNodes[k].nodeValue);
		}
		else
			if (node.childNodes[k].hasChildNodes())
				noeuds_texte_fils(node.childNodes[k], tabtxt);
	}
}

- ajout d'une fonction "noeuds_texte_fils" qui va aller chercher tous les noeuds texte fils de maniere recursive
ainsi une cellule

Code:

<td>TOTO <div>TATA<span> titi</span></div></td>

donnera la chaine "TOTO TATA titi" en CSV

- gestion des colspan : on crée des cellules vides derrieres pour conserver la mise en forme du tableau

Reste à gérer le rowspan : plus compliqué car il faut conserver la valeur pour les lignes suivantes de facon à créer des cellules vides. Et gerer un rowspan+colspan bien sur.

Mais deja c'est cool ! :ccool:

merci

11/12/2009, 13h56
kernelfailure

Une des limites de DOM focalisé d'avantage sur le contenant que le contenu.

Il est bien plus facile de récupérer une collection de tagName que de #text :roll:

Une petite solution (FF,Safari. Pas testée sur les autres) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
Element.prototype.getElementsByNodeName = function (nodeName) {
	var list = new Array();
	list.item = function(i) { return this[i] }; // NodeList
 
	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.hasChildNodes()) list = list.concat(item.getElementsByNodeName(nodeName));
	}
 
	return list;
};

Que tu peux utiliser comme ça, par exemple :

Code:

1
2
3
4
5
6
 
var tds = tr.getElementsByNodeName('TD'); //ou ByTagName, sans doute plus rapide car 'natif'
{pour chaque td de tds :}
    var txts = td.item(i).getElementsByNodeName('#text');
    var str = '';
    for (var i=0, n=txts.length; i<n; i++) str += txts[i].data;

11/12/2009, 19h28
sebhm

j'ai pas testé mais ca a l'air beau !

pourquoi préférer nodeName à nodeType ?

Sans doute parce qu'en tant qu'être humain, je retiens mieux '#text' que '3' ou '#document' que '9' et qu'il y a 12 types à connaitre :mouarf:

On peut aussi créer sur cette base une méthode ByNodeType ;)
Mais, soyons humain, passons une de ces valeurs qui sera immédiatement lisible par tout le monde :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 Node.ELEMENT_NODE Node.ATTRIBUTE_NODE Node.TEXT_NODE Node.CDATA_SECTION_NODE Node.ENTITY_REFERENCE_NODE Node.ENTITY_NODE Node.PROCESSING_INSTRUCTION_NODE Node.COMMENT_NODE Node.DOCUMENT_NODE Node.DOCUMENT_TYPE_NODE Node.DOCUMENT_FRAGMENT_NODE Node.NOTATION_NODE
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 Element.prototype.getElementsByNodeType = function (nodeType) { var list = new Array(); list.item = function(i) { return this[i] }; // NodeList 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.hasChildNodes()) list = list.concat(item.getElementsByNodeType(nodeType)); } return list; };
:ccool:

12/12/2009, 12h11
sebhm

Citation:

Sans doute parce qu'en tant qu'être humain, je retiens mieux '#text' que '3' ou '#document' que '9' et qu'il y a 12 types à connaitre

oui, mais tu n'es pas réellement un etre humain, tu es un informaticien :aie:

et à ce titre, tu te dois de préférer les codes numériques, moins sujets à erreur :mrgreen:
16/12/2009, 14h12
kernelfailure

Je reviens là-dessus pour te signaler que le prototypage de Element sous IE7 ne fonctionne pas. :(
Il est nécessaire, de plus, de wrapper les couches DOM de base. :aie:

A priori, cela devrait fonctionner sous IE8. En théorie, il intègre le modèle DOM du W3C (dixit Microsoft). :roll:

Woili voilou.
16/12/2009, 16h19
sebhm

Citation:

de wrapper les couches DOM de base

c'est à dire ?
16/12/2009, 17h03
kernelfailure

Je n'ai pas fini d'en faire le tour, mais globalement, il s'agit de ré-écrire document.createElement.
Certains utilisent HTC, d'autres non.

Le but est de faire retourner un objet Element à la fonction CreateElement.

Mais il faut voir aussi les document.getElement(s)... et bien sur les Element.getElement(s)...

Pas mal de boulot pour IE7 en sommes. :aie:

Finallement, j'ai trouvé une méthode moins compliquée mais tout de même bien tordue.
Le hack consiste à utiliser CSS pour aller décorer les éléments. :ccool:
(reste plus qu'à bien isoler IE7...)

Il y a un bémol, j'en parlerais à la fin, j'espère que quelqu'un me proposera une solution.
Code:

1 2 3 4 5 6 (function(){ 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)}) || void(this.hasChildNodes = function(){return this.childNodes.length > 0}) )'); } })()
Comme tu peux le constater, j'ai du aussi ajouter la méthode hasChildNodes, qui bizarrement, ne se trouvait pas implémentée sur certaines balises sans que je puisse déterminer le pourquoi du comment 8O

Ensuite, on prototype Element comme dans les posts ci-dessus.

Ok, avec cette méthode, le script est compatible FF, Opera, Safari, Chrome et IE7 MAIS, pour ce dernier, j'ai des résultats aléatoires : Il fonctionne au petit bonheur la chance des rafraichissements.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ... <script type="text/javascript" src="Element.prototype.js"></script> <script defer="defer"> function extrude() { var mbody = document.getElementsByTagName('BODY')[0]; var txt = mbody.getElementsByNodeName('#text'); var str = ''; for (var i=0, n=txt.length; i<n; i++) str += txt[i].data; alert(str.replace(/[\s]+/g,' ')); alert(mbody.getElementsByTagName('TD').length); } </script> </head> <body onload="extrude()"> ...
J'ai tenté de retarder par tous les moyens que je connaissais l'exécution du script, il semble que ce ne soit pas suffisant. Par change, defer est pris en compte sous IE :ccool:

Si quelqu'un a une idée, quelque chose que j'aurais loupé, merci de me le dire.

Une idée pour optimiser la cible du CSS ? ('*' est utilisé. Comment faire pour ne pas prendre les classes ni les IDs par exemple. Ne taper que sur les balises ?)

(Je vais sortir le hasChilNodes du CSS et adapter mes méthods, pour voir si ça ne l'optimise pas un peu)

Quelques autres propositions ? ;)

18/12/2009, 09h43
sebhm

t'es foufou non ?? :aie:

mal à la tete rien qu'en voyant cette ligne

Code:

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)}) || void(this.hasChildNodes = function(){return this.childNodes.length > 0}) )');

j'essaierai de la comprendre un peu plus tard...
bon courage
18/12/2009, 12h32
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. 8O

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:

document.createStyleSheet()

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

Code:

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:

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é. :ccool:

Code:

* {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:

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

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

Code:

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.

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

Element.prototype.js :

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

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

16/04/2014, 15h15
PierrotY

... :ptdr: ... 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 :ave: !!
16/04/2014, 15h36
SpaceFrog

Thread vide test

http://jsfiddle.net/5z3eR/

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:

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 :mrgreen:
Bien entendu, si vous trouvez à redire sur mon code javascriptoajax, je suis tout ouï.

A+

Fuseau horaire GMT +2. Il est actuellement 17h19.