Discussion :

[moimp]

Bonjour,

Dans un script dont le but est de sélectionner des colonnes de tables de données et de leur affecter un format d'impression, je voudrais récupérer des balises input dont l'id est un tableau généré en php.

Chaque id et nom de balise sont de la forme var_nom_table[var_nom_champ][print] où seul print est une chaîne constante et j'ai besoin de récupérer uniquement les balises dont la deuxième dimension est justement ce print.

L'id et le nom sont identiques.

Pour info voici le bout de code qui génère les noms et les id des balises input (tabLine (objet $line) et tabCell sont des classes perso pour faciliter l'écriture de tableau) :

Code php :

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
<?php
        $keyName = $table.'['.$colKey.']';
        $categories = ['print', 'bold', 'italic', 'family', 'size'];
        $i = 0;
        foreach ($categories as &$category) {
            $tagNames[$i] = $keyName.'['.$categories[$i].']';
            $i++;
        }
        //var_dump($tagNames);
        $line->addCell(new tabCell("<input type='checkbox' name='$tagNames[0]' id='$tagNames[0]' onchange='onMajChk()' />"));
        $line->addCell(new tabCell("<input type='checkbox' name='$tagNames[1]' id='$tagNames[1]' />"));
        $line->addCell(new tabCell("<input type='checkbox' name='$tagNames[2]' id='$tagNames[2]' />"));
        //$line->addCell(new tabCell("<input type='checkbox' name='$tagNames[3]' id='$tagNames[3]' />")); // A remplacer par liste de choix
        $line->addCell(new tabCell("<input type='number' name='$tagNames[4]' id='$tagNames[4]' min='8' max='16' value='10' />"));
        $lines .= $line;
?>

[NoSmoking]

Bonjour,
tu peux utiliser la méthode querySelectorAll(selecteur) en ciblant via un sélecteur [id*="print"], par exemple, pour récupérer les éléments dont l'ID contient print.

[moimp]

Bonjour,
Je ne comprends pas ton écriture du sélecteur. J'ai regardé le tuto et je ne comprends toujours pas.
Est-ce que le sélecteur doit obligatoirement figurer dans une feuille de style?
Voici mes essais:

Code :

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

1
2
3
4
5
6
7
8
	function onMajAll() {
		alert('fonction appelée');
		var status = window.document.getElementById('all'),
			//checkboxes['print'] = window.document.querySelectorAll('[id*="print"]');
			//checkboxes['print'] = window.document.querySelectorAll('id=*"[print]"');
			checkboxes['print'] = window.document.querySelectorAll('#=*"[print]"');
		alert(checkboxes);
	}

[SpaceFrog]

un id tableau ?
a ma connaissant l'id est de type string ... donc pas du tout interprété comme un tableau !

Pour ce qui est du sélecteur

Code :

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

 [id^="print"]

Commence par print, aura un scope plus réduit

[moimp]

Non ça ne fonctionne pas non plus. Est-ce que tu peux m'écrire toute l'expression. Le problème est peut-être dans mon écriture.
Je suis d'accord, le tableau est interprété ici comme une chaîne. L'écriture sous forme de tableau est pour l'exploitation en php.
J'ai (provisoirement ?) résolu le problème en créant une classe fictive.

[badaze]

Et comme ça ?

Code html :

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
<script>
function toto() {
  var coll = document.querySelectorAll('input.print');
  alert(coll.length);
}
</script>
<input class="print" type='checkbox' name='var_nom_table[1][print]' id='var_nom_table[1][print]' /><br/>
<input class="print" type='checkbox' name='var_nom_table[2][print]' id='var_nom_table[2][print]' /><br/>
<input class="print" type='checkbox' name='var_nom_table[3][print]' id='var_nom_table[3][print]' /><br/>
<input class="print" type='checkbox' name='var_nom_table[4][print]' id='var_nom_table[4][print]' /><br/>
<input class="print" type='checkbox' name='var_nom_table[5][print]' id='var_nom_table[5][print]' /><br/>
<input class="print" type='checkbox' name='var_nom_table[6][print]' id='var_nom_table[6][print]' /><br/>
<input class="bold" type='checkbox' name='var_nom_table[1][bold]' id='var_nom_table[1][bold]' /><br/>
<input class="bold" type='checkbox' name='var_nom_table[2][bold]' id='var_nom_table[2][bold]' /><br/>
<input class="bold" type='checkbox' name='var_nom_table[3][bold]' id='var_nom_table[3][bold]' /><br/>
<input class="bold" type='checkbox' name='var_nom_table[4][bold]' id='var_nom_table[4][bold]' /><br/>
<input class="bold" type='checkbox' name='var_nom_table[5][bold]' id='var_nom_table[5][bold]' /><br/>
<input type="button" value="Clic" onclick="toto()" />

[NoSmoking]

Non ça ne fonctionne pas non plus.

Nous voilà bien avancé, mais cela n'a rien d'étonnant compte tenu de la façon dont tu as de t'en servir.
Utilisation :

Code :

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

1
2
var mesElements = document.querySelectorAll('[id*="print"]');   // qui contiennent « print »
var mesElements = document.querySelectorAll('[id$="[print]"]'); // qui se terminent par « [print] »

Ceci étant et attendu que

le but est de sélectionner des colonnes de tables de données et de leur affecter un format d'impression

la solution de passer par une classe me paraît plus judicieuse, voir la mise en oeuvre de badaze.

[EDIT] correction coquille.

[moimp]

Merci pour vos réponses.
La solution de badaze est celle que j'avais adoptée avant même d'avoir lu son message (mon message d'hier 19h33) et ça fonctionne très bien.
Par contre dans tes exemples avec l'id, je ne comprends pas pourquoi on ne referme pas le crochet à la fin?

[NoSmoking]

je ne comprends pas pourquoi on ne referme pas le crochet à la fin?

simplement une erreur de ma part, corrigée !

Résolue donc ?

[moimp]

OK, merci. Je marque résolu.