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>
                       ...

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 = [];
//alert("liste marque = "+liste_marque);

//Fonction JS pour selectionner les lignes
$('tbody').on( 'click', 'tr', function () //Lors d'un clic sur une ligne du tableau mais pas sur l'en-tête
{
    $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')) //Si la ligne clicquée a la classe "selected"
    {
        Suppr_Liste($classe); //Appel de la fonction Suppr_Liste
        $('tr[class="'+$classe+'"]').removeClass('selected');//On enleve la classe "selected" aux élément ayant la même classe que la ligne cliquée
    }
    else//Si la ligne clicquée n'a pas la classe "selected"
    {
        $('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); //Appel de la fonction Ajout_Liste
    }
    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);//On ajoute "id" à la liste*/
    
    $('.selected').each(function() //Pour chaque ligne ayant la classe "selected"
    {
        var id = $('.col_marque', this).html();//On récupére la valeur de la 1ere cellule du tableau
        var position = liste_marque.indexOf(id)//On récupére la position de "id" dans la liste
        if(('undefined' != typeof(id)) && (position == -1)) //Si id existe et n'est pas présent dans la liste_marque
        {
            liste_marque.push(id);//On ajoute "id" à la liste
        }
    });   
}

function Suppr_Liste($classe)
{	
   ...