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, "");
    }
}