Récupérer cellule tableau avec rowspan

Rovalf
Javascript

Bonjour,

Je rencontre un petit probléme pour récuperer la valeurs de certaines cases précises de mon tableau HTML.
J'ai donc un tableau HTML avec des rowspans :
Le tableau

Ce que je voudrais faire c'est qu'aprés avoir sélectionné plusieurs lignes, on clique sur afficher et les marques de voiture des lignes selectionnées s'affiche.
Pour l'instant j'en suis la :

function afficher()
{
    $('.selected').each(function() 
    {
        var identifiant = $(this).find('.col_marque').html(); 
        //if(identifiant!="NULL")
        //{
                alert(identifiant);
        //}
    });
}

Pour chaque ligne sélectionnée, je recupére dans la variable identifiant la valeur de la cellule ayant la classe "colmarque".
Le probléme que j'ai c'est que si j'ai un rowspan de 3 sur la ligne sélectionnée(quand je dis ligne je parle de "grosse"ligne avec le rowspan), le premier affichage est bien le marque de la voiture mais les deux autres ont undefined (normal puisque dans la "grosse" ligne, il y a 2 ligne où la colone marque n'existe pas).
Le JSFiddle pour illustrer : JSFIDDLE
Donc voila du coup je ne vois pas trop comment m'y prendre. S'y quelqu'un à une solution, je suis preneur!

Merci.

10 réponses

betaWeb
Réponse acceptée

Salut,

J'ai modifié ton JSFiddle et ça marche bien maintenant (check la console de ton inspecteur): https://jsfiddle.net/nuzo8gn2/15/

betaWeb
Réponse acceptée

J'ai refais une MAJ, vas voir: https://jsfiddle.net/nuzo8gn2/18/ ;)

Pour répondre à ta question concernant "if (items.length)": si le tableau d'items est vide, la fonction join() risque de retourner une erreur et de bloquer le script. Voilà pourquoi il faut vérifier si celui-ci est vide ou non via sa propriété "length".

betaWeb
Réponse acceptée

Alors:

 var $marques = $('.marques');

Je stocke l'objet jQuery dans une variable car il est utilisé plusieurs fois dans le script, ça évite de le rappeler x fois le même objet et ça permet d'optimiser les perfs' du script.

return items.length ? $marques.text(items.join(', ')) : $marques.text('');

C'est ce qu'on appelle une condition ternaire, et ça permet de raccourcir le code et d'éviter d'écrire 5 lignes quand on peut en écrire une seule https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel/ .

Voilà ;)

Rovalf
Auteur

Bonjour et merci pour la réponse.
Je viens de suivre le lien que tu as posté (je suis obligé de passer par un autre navigateur, impossible de voir le code sous chromium) mais je retombe sur celui que j'avais posté. C'est normal?

Rovalf
Auteur

Autant pour moi ça viens de se mettre à jour. je regarde ça.

betaWeb

Salut,

Encore une petite MAJ: https://jsfiddle.net/nuzo8gn2/18/ ;)

Rovalf
Auteur

Ok je pense avoir compris. je ne savais pas que pour tester le "undefined" il fallait uriliser un "typeof".
Juste pour récapituler :

    var items = [];
    $('.selected').each(function(){
     var id = $(this).find('.col_marque').html();

On créait la liste "items", puis pour chaque ligne ayant la classe "selected" on récupére la valeur du td "col-marque" dans la variable "id"?

 if ('undefined' != typeof(id)) {
            items.push(id);
        }

On test si id n'est pas de type "undefined", On teste son existence en fait?

 if (items.length) {
        $('.marques').text(items.join(', '));

La c'est juste pour l'affichage mais pourquoi "if (items.length)"?

En tout cas merci beaucoup pour la réponse.

PS : j'avais posté cette question sur d'autre forum. Cela vous pose-t-il un problème si j'y poste cette réponse? Si ça peut aider des personnes dans le futur.

betaWeb

Pas de soucis. Pense à passer le sujet en résolu ;)

Rovalf
Auteur

Super. Ca marche au poil.
Je viens de regarder les 2 majs sont les mêmes (je n'avais pas vu la 1ere dans un 1er temps)
Etant novice, je ne vois pas trop quelles sont les amélioration apportés entre les deux.

 var $marques = $('.marques');

Ca j'imagine que c'est par ce que c'est plus pratique que d'appeler la fonction a chaque fois par son vrai nom

   return items.length ? $marques.text(items.join(', ')) : $marques.text('');

C'est pour gagner de la place en enlevant le if "traditionnel"?
Désolé si les questions peuvent parraitre idiote mais j'aimerai bien comprendre l'interet de ces petites chose (gain de temps, de lisibilité, etc) pour pouvoir les réappliquer par la suite.

Merci.

Rovalf
Auteur

Ok!!!
Merci beaucoup pour vos réponses et vos explications!