Récupérer valeurs d'une ligne ajoutée automatiquement dans un tableau

**NoSmoking** · 01/10/2013, 22h22

getElementsByTagName s'applique à ma connaissance à tous les éléments, on peut faire par exemple

Code :

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

1
2
3
4
var tableau = document.getElementById('idTable');
if( !tableau.lst){
  tableau.lst = tableau.getElementsByTagName('TEXTAREA');
}

mais ce qui fait la force de querySelectorAll c'est son filtrage et là dans pas mal de cas il n'y à pas photo.

**SylvainPV** · 02/10/2013, 00h20

Tiens en effet, ça je l'ignorais. J'ai trouvé getElementsByClassName au passage, support IE9 et +

**Bovino** · 02/10/2013, 08h16

Ah... tu es tombé sur HTML5 : quelques nouveautés de l'API DOM pour JavaScript...

Sinon, la grande force de querySelector[All](), c'est surtout de pouvoir lui passer comme paramètre des sélecteurs avec la syntaxe CSS, c'est vraiment utile et efficace, mais il reste quelques étrangetés.
Par exemple, sur le document

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
<!DOCTYPE html>
<html>
<head>
	<title>querySelectorAll</title>
	<meta charset="utf-8" />
</head>
<body>
	<div id="main">
		<div class="inner foo">1</div>
		<div class="inner foo">2</div>
		<div class="inner foo">3</div>
		<div class="inner foo">4</div>
	</div>
	<div class="foo">5</div>
	<script>
        var $main = document.querySelector('#main');
        console.log('.inner : ', $main.querySelectorAll('.inner').length);      // OK... 4
        console.log('#main .inner : ', $main.querySelectorAll('#main .inner').length);  // Oops... 4 aussi !
        console.log('body .inner : ', $main.querySelectorAll('body .inner').length);    // WTF... encore 4 !
        console.log('body .foo : ', $main.querySelectorAll('body .foo').length);        // Toujours 4 !
        </script>
</body>
</html>

Dans le premier cas, on peut intégrer l'élément de référence ($main) dans le sélecteur et pire, dans le second, on peut même y mettre un sélecteur n'appartenant pas au fragment correspondant à l'élément de référence !

**Kaamo** · 02/10/2013, 09h11

Seulement sélectionner tous les <div> du document s'avère rarement utile au final

En effet, mais mon post avait juste pour vocation de montrer l'aspect dynamique/statique des listes renvoyées.
Et oui, tu peux utiliser getElementsByTagName sur un element, donc filtrer au préalable sur l'élément de ton choix avant de retourner seulement ses tags enfants.

**lastarfane** · 02/10/2013, 10h08

Envoyé par lastarfane
Merci j'ai évolué et à présent je veux savoir s'il est possible d'appliquer aussi ton code aux balises <input> et <select>

En fait javais mal envoyé, en réalité Je m'y suis déja mis NoSmoking. Tout marche bien

A présent, pour la beauté de mon code:

Je souhaite griser les boutons "ADD" précédents pour laisser seulement le dernier actif.

Deuxièment enregistrer les valeurs recupérée dans un array à chaque ajout

Si quelqu'un peut m'orienter cela m'aiderais

**Kaamo** · 02/10/2013, 11h03

Montre nous le code auquel tu es parvenu

Il n'y a pas besoin de plusieurs boutons "Add", un seul suffit.

Deuxièment enregistrer les valeurs recupérée dans un array à chaque ajout

Tu veux transformer la liste récupérée en type Array ?
Tu peux utiliser ceci, où nodeList est la liste récupérée à partir de document.querySelectorAll ou document.getElementsByTagName, etc ... selon ton code.

Code :

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

Array.prototype.slice.call(nodeList)

Avec le mode de compatibilité si tu veux supporter IE < 9

**NoSmoking** · 02/10/2013, 18h35

Envoyé par Bovino

Ah... tu es tombé sur HTML5 : quelques nouveautés de l'API DOM pour JavaScript...

31/08/2012, 15h10
si en plus tu diffuses des articles pendant les vacances

Ces méthodes sont disponibles sur tous les navigateurs modernes y compris Internet Explorer depuis la version 9.

en fait IE8 supporte les méthodes à condition d'être en mode STANDARD.

**Watilin** · 02/10/2013, 21h30

Envoyé par Bovino

... mais il reste quelques étrangetés.

Moi ça me paraît logique. Il s'agit d'un filtrage, non ? Parmi les enfants de #main, on retient uniquement ceux qui correspondent au sélecteur donné. Si un élément de .inner est enfant de #main, il est tout naturellement enfant du body également, donc il correspond au sélecteur body .inner.

Je n'ai perdu personne ?

**SylvainPV** · 03/10/2013, 13h33

Effectivement avec querySelector le sélecteur s'applique toujours au niveau du document, et seuls les noeuds enfants de l'élément ciblé qui répondent au sélecteur sont conservés. Ca peut paraître contre-intuitif, mais pas tant que ça si on assimile le sélecteur à un sélecteur CSS. Les règles de sélection CSS sont toujours exécutées dans le contexte du document.

**lastarfane** · 04/10/2013, 16h20

Envoyé par SylvainPV

C'est fou ça... Il y a tellement de débutants en Javascript paralysés car ils ne connaissent rien d'autre que document.getElementById pour récupérer leurs éléments. Pourquoi enfoncer le clou et les faire persister dans leur erreur en leur demandant de continuer avec des ID incrémentés cette fois ?

Il existe des dizaines de fonctions différentes pour parcourir le DOM dans tous les sens et récupérer les éléments souhaités. On a même une fonction magique document.querySelector/querySelectorAll avec un large support aujourd'hui qui fait presque aussi bien que le sélecteur de jQuery. Je plains tous ceux qui ne connaissent pas ces fonctions et doivent se casser les dents à l'heure actuelle.

http://jsfiddle.net/pfYZF/

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<form name="form2" method="post" action="">
      <table id="idTable" align="center">
            <tr>
                <td width="15%">
                    <textarea class="sizepopulation" id="sizepopulation" rows="1" cols="15" ></textarea>
                </td>
 
                 <td width="10%">
                       <input type='button' name='add' value='Add' onclick='insererLigne_Fin()'/>
                 </td>
                  </tr>
          </table>
</form>

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
function insererLigne_Fin()
{
    var cell, ligne;
 
     // je récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");
    var nbLignesAvant = tableau.rows.length;
    ligne = tableau.insertRow(-1); // ici création d'une ligne pour ajout en fin de table
    cell = ligne.insertCell(0);
    cell.innerHTML = " <textarea class='sizepopulation' rows='1' cols='15' ></textarea>";
    cell = ligne.insertCell(1);
    cell.innerHTML = " <input type='button' name='add' value='Add' onclick='insererLigne_Fin()' />";
 
	var nbLignesApres = tableau.rows.length; // egal à nbLignesAvant + 1 normalement
 
	var textareas = tableau.querySelectorAll("textarea.sizepopulation");
	var ch_size = textareas[nbLignesAvant-1].value;
    alert('Valeur de la dernière ligne avant insertion: '+ ch_size);
 
}

Au fait mon projet avance hyper bien, une fois encore merci à ceux qui m'avait aidé.

Malheureusement ce matin, test sur test pour voir les # contrôles qui me restent (question de sécurité) je tombe sur oooooooooohhhh:

J'avais rajouté dans mon tableau une colonne contenant un select pour les mois de l'année. ET je constacte qu'après le click sur "Add"; il perd la valeur choisi: en quelque sorte, il réinitialise le select. Ce qui n'est pourtant pas le cas pour les textarea et le input.
Piiiiiiiiiiiire c'est seulement la première ligne qui pose blèm, sur les reste des lignes le choix est conservé. J'aimerais avoir un peu d'éclaicissement

Récupérer valeurs d'une ligne ajoutée automatiquement dans un tableau

JavaScript

Discussions similaires

Partager

Partager