Discussion :

[MrMeteo]

Bonjour,

J'ai l'affichage d'un tableau dont le nom d'utilisateur est trop long,
ex: Alexandre Dutoit (Bureau XYZ) (Ville ABC)

J'ai un tableau du genre:

Code html :

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

1
2
3
4
5
6
7
8
9
10
<tr>
<td>NoInv</td>
<td class="client">Alexandre Dutoit (Bureau XYZ) (Ville ABC)</td>
...
</tr>
<tr>
<td>NoInv</td>
<td class="client">France Malabrutet (Bureau 123) (Ville 098)</td>
...
</tr>

J'ai essayé un script du genre:

Code :

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

1
2
3
4
var x=document.getElementsByClassName("client")
for (i = 0; i < x.length; i++) {
    y=x[I].indexOf("(")    // Cherche la position de la première parenthèse dans le nom du client
}

Mais je recois un message d'erreur:

TypeError: x[i].indexOf is not a function

Merci d'avance,
Jacques

[devyan]

Bonjour,

indexOf() n'existe pas... enfin pas dans les HTMLElements

[MrMeteo]

... j'ai essayé avec slice, split.... même résultat!

Jacques

[kaari kosaku]

Comme te l'as indiqué Devyan, ce sont des méthodes présentes sur les array, or un objet htmlElement n'en est pas un.
Si tu veux accéder à ton texte tu peux utiliser l'attribut HtmlElement#innerHTML qui te permet d'obtenir le contenu de ton <td> dans une chaine de caractères.

Sinon, comment sont générées ces entrées dans le tableau ?

[MrMeteo]

Bonjour Kaari,

Merci, le innerHTML fonctionne très bien!
Mon tableau est généré par SharePoint... et mon problème est que je ne peux utiliser Designer!

Je dois donc utiliser le javascript pour modifier les nom, car le système affiche des noms trèèèès long
(et ça me cause des problèmes dans les affichages)

Mon problème maintenant, c'est que je dois trouver les nom/prénom parmi beaucoup de code
(Ahhhhh ce Microsoft!!)

Code :

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

<span class="ms-imnSpan"><a onclick="GoToLink(this);return false;" href="/sites/_layouts/userdisp.aspx?ID=99">Malbouffe André (Bureau XXX) (Ville ABC)</a></span>

... ça avance!!

Merci,
Jacques

[Watilin]

Mon tableau est généré par SharePoint... et mon problème est que je ne peux utiliser Designer!

Si tu n'as pas acès aux sources côté serveur, tout ce que tu peux faire c'est des rustines. Les noms trèèèès longs passeront toujours dans le tuyau HTTP et seront toujours utilisés par le navigateur pour préparer le rendu visuel (qui est complexe pour un tableau, j'insiste là-dessus).

Si c'est un problème d'affichage, pourquoi ne pas le résoudre avec la technologie la mieux adaptée aux affaires d'affichage ? Je parle de CSS

Code CSS :

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

table { table-layout: fixed; }

Voir : table-layout.

Il semble que tu as un motif répétitif : (Bureau ...) (Ville ...). Tu pourrais utiliser une expression régulière pour repérer ce motif et le retirer des fragments de texte de ton DOM.

Code :

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

/\(Bureau [^\)]+\) \(Ville [^\)]+\)/g

Je te déconseille innerHTML dans ce cas-là car, utilisé en écriture, il fait appel à l'interpréteur HTML pour reconstruire un fragment d'arbre DOM et le réinsérer dans la page. Utiliser l'interpréteur HTML quand tu cherches juste à modifier du texte brut, c'est un peu bête. Mais ça reste la solution la plus polyvalente, je l'avoue.

Pour raffiner un peu le traitement il faut faire des hypothèses sur la structure HTML, tout en restant le moins dépendant possible. C'est un art délicat. Par exemple, si tu supposes que tous les textes à remplacer se trouvent dans des <a>, eux-mêmes descendant indirectement de tes <td class="client">, tu peux utiliser getElementsByTagName :

Code :

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

1
2
3
4
5
6
7
8
9
10
var x = document.getElementsByClassName("client");
for (var i = 0; i < x.length; i++) {
    var liens = x[i].getElementsByTagName("a");
    for (var j = 0; j < liens.length; j++) {
        if (liens[j].childNodes.length === 1 && // si le lien n'a qu'un seul descendant, il y a des chances que ce soit un nœud texte
                liens[j].firstChild.nodeType === Node.TEXT_NODE) { // je vérifie que c'est bien un nœud texte
            var noeudTexte = liens[j].firstChild;
            noeudTexte.data = noeudTexte.data.replace(/\(Bureau [^\)]+\) \(Ville [^\)]+\)/g, "");
    }
}

On peut aller plus loin si on suppose que tes utilisateurs disposent d'IE9 minimum. Cette supposition, tu l'as déjà faite car tu fais appel à getElemntsByClassName. À partir d'IE9, on dispose d'une propriété « magique » qui ressemble à innerHTML mais qui traite uniquement du texte brut (l'interpréteur HTML n'est pas utilisé) : il s'agit de textContent.
On dispose aussi de childElementCount ainsi que querySelectorAll qui simplifie énormément le travail de sélection des éléments :

Code :

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

1
2
3
4
5
6
7
var liens = document.querySelectorAll('td.client a');
for (var i = 0; i < liens.length; i++) {
    if (!a.childElementCount) { // je vérifie que le lien ne contient pas d'éléments HTML car,
                                // si je modifiais textContent, ils seraient supprimés
        a.textContent = a.textContent.replace(/\(Bureau [^\)]+\) \(Ville [^\)]+\)/g, "");
    }
}

[CosmoKnacki]

Si tu es sûr que toutes les balises td ayant pour classe "client" sont ta cible, et qu'elles ne contiennent rien d'autre que du texte (pas de balises), dans ce cas tu peux utiliser:

Code :

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

1
2
3
4
5
var tdNodes = document.getElementsByTagName('td');
for (var i=0, tdNode; tdNode = tdNodes[i++];) {
    if (tdNode.getAttribute('class')=='client')
        tdNode.firstChild.nodeValue = tdNode.firstChild.nodeValue.split(' (')[0];
 }

[SpaceFrog]

c'est surtout que i != I

Code :

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

1
2
3
var x=document.getElementsByClassName("client")
for (i = 0; i < x.length; i++) {
    y=x[I].

[MrMeteo]

Bonjour,

Avec la piste de querySelectorAll, puisque IE ne supporte pas getElementsByClassName,
j'ai finalement utilisé ce code:

Code :

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

1
2
3
4
5
6
7
8
	var e = document.querySelectorAll(".ms-vb-user");
	for( var i = 0, l = e.length; i < l; i++ ) {
		e[i].style.whiteSpace="nowrap";
		var f = e[i].getElementsByTagName('a');
		temp=f[0].innerHTML;
		long_texte=temp.indexOf("(");
		texte=temp.substring(0, long_texte);
		e[i].innerHTML=texte;

Comme je ne voulais pas garder le lien, j'ai utilisé le innerHTML pour remplacer
tout ce qui se trouvait dans le TD, par le texte brut.

Merci de votre aide!
Jacques

[Watilin]

Bonjour,

Avec la piste de querySelectorAll, puisque IE ne supporte pas getElementsByClassName,

Pas tellement moins : http://www.quirksmode.org/dom/core/#t11 et http://www.quirksmode.org/dom/core/#t14.
Tu ne peux réellement compter sur l'un comme sur l'autre qu'à partie d'IE9.

Si tu te soucie vraiment de la compatibilité, utilise un polyfill ou un framework.

Comme je ne voulais pas garder le lien, j'ai utilisé le innerHTML pour remplacer
tout ce qui se trouvait dans le TD, par le texte brut.

textContent remplace aussi, et il est plus efficace. Essaye !

[NoSmoking]

Bonjour,
innerText fait l'affaire pour les old-IE, et concernant querySelectorAll pour que cela fonctionne avec IE8 il faut en rester à des sélecteurs CSS2.1