JSFiddle - React, Tailwind, and code Playground

by Flavors

HTML

<div id="tableau">
    <table>
        <thead>
            <tr class="en_tete">
                <th>Marque</th>
                <th>Modele</th>
                <th>Couleur</th>
                <th>Nb Options</th>
            </tr>
        </thead>
        <tbody>
            <TR class="ligne_1">
                <TD class="col_marque" rowSpan="2">citroen</TD>
                <TD rowSpan="2">picasso</TD>
                <TD>blanc</TD>
                <TD>2</TD>
            </TR>
            <TR class="ligne_1">
                <TD>bleue</TD>
                <TD>18</TD>
            </TR>
            <TR class="ligne_2">
                <TD class="col_marque" rowSpan="2">peugeot</TD>
                <TD rowSpan="2">208</TD>
                <TD>rouge</TD>
                <TD>2</TD>
            </TR>
            <TR class="ligne_2">
                <TD>grise</TD>
                <TD>5</TD>
            </TR>
            <TR class="ligne_3">
                <TD class="col_marque" rowSpan="2">porsche</TD>
                <TD rowSpan="2">boxer</TD>
                <TD>blanche</TD>
                <TD>2</TD>
            </TR>
            <TR class="ligne_3">
                <TD>noire</TD>
                <TD>10</TD>
            </TR>
            <TR class="ligne_4">
                <TD class="col_marque" rowSpan="3">renault</TD>
                <TD rowSpan="3">laguna</TD>
                <TD>rouge</TD>
                <TD>10</TD>
            </TR>
            <TR class="ligne_4">
                <TD>rouge</TD>
                <TD>2</TD>
            </TR>
            <TR class="ligne_4">
                <TD>bleue</TD>
                <TD>7</TD>
            </TR>
            <TR class="ligne_5">
                <TD class="col_marque">volkswagen</TD>
                <TD>polo</TD>
                <TD>noire</TD>
                <TD>5</TD>
            </TR>
        </tbody>
    </table>
</div> <span class="marques"></span>

CSS

html, body {
    height:100%;
}
table {
    margin-top:40px;
    margin-left:20px;
    text-align:center;
    border-collapse:collapse;
}
td, th {
    padding:3px;
    border: 1px solid black;
    empty-cells:hide;
}
label {
    display: block;
    width: 150px;
    float: left;
}
tbody, checkbox {
    cursor:pointer;
}
.selected {
    background-color:#e9f8ff;
}

JavaScript

var $marques = $('.marques');
var liste_marque = [];


//Fonction JS pour selectionner les lignes
$('tbody').on( 'click', 'tr', function () 
{
    $classe = $(this).attr('class')//On recupére le nom de la classe de la ligne sur laquelle on a cliqué (plusieur lignes peuvent avoir la même classe elles sont rangées dans l'ordre croissant des "ligne_tableau_x") la classe des lignes a été mise en place pour la selection avec rowspan
    if($(this).hasClass('selected')) 
    {
        Suppr_Liste($classe); 
        $('tr[class="'+$classe+'"]').removeClass('selected');//On enleve la classe "selected" aux élément ayant la même classe que la ligne cliquée
    }
    else
    {
        $('tr[class="'+$classe+'"]').addClass('selected');//On ajoute la classe "selected" aux élément ayant la même classe que la ligne cliquée
        Ajout_Liste($classe);
    }
    liste_marque.length ? $marques.text(liste_marque.join(', ')) : $marques.text('');
});
				
//Fonction JS pour Mettre à jour la liste des elements selectionnes
function Ajout_Liste($classe)
{	
    var search = $('tr[class="'+$classe+'"]').find('.col_marque').text();
    liste_marque.push(search);
}

function Suppr_Liste($classe)
{	
    var search = $('tr[class="'+$classe+'"]').find('.col_marque').text();
    position = liste_marque.indexOf(search);
    liste_marque.splice(position,1);
}