Discussion :

[moimp]

Bonjour,

Je ne sais pas si c'est la bonne solution mais dans le code suivant, j'aimerais afficher une liste d'options en utilisant le rang de lists et celui de pens à la ligne 21, un truc du genre lists[pens.rang].classList.remove('hidden'). Je ne sais pas si je me fais bien comprendre.

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
"use strict";
 
const
	table		= document.querySelector('.displCard table')
	, lastCols	= table.querySelectorAll('td:last-child:not([colspan])')
	, lists		= table.querySelectorAll('td:last-child select')
	, pens		= table.querySelectorAll("img[src*='edit.png']")
	;
 
function lastColsOnWindowLoad() {
	for (let i=0, max=lastCols.length; i<max; i++) {
		lastCols[i].classList.add('hidden');
	}
}
 
window.onload = function(){
	lastColsOnWindowLoad();
}
 
function handleOnClick() {
 
}
 
for (let i=0, max=pens.length; i<max; i++) {
	pens[i].onclick	= handleOnClick;
}

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
19
20
21
22
23
24
<table>
	<thead>
		<tr><th>Prénom</th><th>Nom</th><th>Date de naissance</th><th>Tél. portable</th><th>Tél. travail</th><th>Courriel</th><th></th><th></th><td></td></tr>
	</thead>
	<tbody>
		<tr>
			<td>Prénom1</td><td>Nom1</td><td>01/11/2011</td><td></td><td></td><td></td><td><img src='images/edit.png' title='Modifier la filiation' data-id='63' /></td><td><a href='parentPage.php?childPageKey=7&id=63' title='Effacer'><img src='images/del.png' /></a></td>
			<td>
				<select name='filiation' data-id='63'>
					<option value='2'>Enfant des deux</option><option value='2'>Enfant du contact</option><option value='3'>Enfant du conjoint</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Prénom2</td><td>Nom2</td><td>07/03/2016</td><td></td><td></td><td></td><td><img src='images/edit.png' title='Modifier la filiation' data-id='64' /></td><td><a href='parentPage.php?childPageKey=7&id=64' title='Effacer'><img src='images/del.png' /></a></td>
			<td>
				<select name='filiation' data-id='64'>
					<option value='2'>Enfant des deux</option><option value='2'>Enfant du contact</option><option value='3'>Enfant du conjoint</option>
				</select>
			</td>
		</tr>
	</tbody>
	<tr><td colspan="9" class="center"><input type="submit" value="Nouveau" formaction="parentPage.php?childPageKey=6&relation=9" /></td></tr>
</table>

[danielhagnoul]

Normalement, une nodelist obtenue par querySelectorAll doit être transformée en Array avant d'être manipulée (lorsqu'on ne le fait pas explicitement ce sont les méthodes d'optimisation du code du navigateur qui s'en charge).

Code :

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

arrListes = Array.from(table.querySelectorAll('td:last-child select'));

Voir : https://developer.mozilla.org/fr/doc...aux/Array/from

[moimp]

1-D'après ce que je viens de voir Array.from ne fonctionne pas avec Internet Explorer qui est malheureusement le navigateur le plus utilisé.
2-ça ne me donne pas le rang (la position, la clef, l'index) dans l'array.