JSFiddle - React, Tailwind, and code Playground

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 data-tr="ligne_1">
                            <TD rowSpan="2">citroen</TD>
                            <TD rowSpan="2">picasso</TD>
                            <TD>blanc</TD>
                            <TD>2</TD>
                        </TR>
                        <TR data-tr="ligne_1">
                            <TD>bleue</TD>
                            <TD>18</TD>
                        </TR>
                        <TR data-tr="ligne_2">
                            <TD rowSpan="2">peugeot</TD>
                            <TD rowSpan="2">208</TD>
                            <TD>rouge</TD>
                            <TD>2</TD>
                        </TR>
                        <TR data-tr="ligne_2">
                            <TD>grise</TD>
                            <TD>5</TD>
                        </TR>
                        <TR data-tr="ligne_3">
                            <TD rowSpan="2">porshe</TD>
                            <TD rowSpan="2">boxer </TD>
                            <TD>blanche</TD>
                            <TD>2</TD>
                        </TR>
                        <TR data-tr="ligne_3">
                            <TD>noire</TD>
                            <TD>10</TD>
                        </TR>
                        <TR data-tr="ligne_4">
                            <TD rowSpan="3">renault</TD>
                            <TD rowSpan="3">laguna</TD>
                            <TD>rouge</TD>
                            <TD>10</TD>
                        </TR>
                        <TR data-tr="ligne_4">
                           ...

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;
}

tr.selected td{
    background-color: #e9f8ff;
}

JavaScript

//Fonction JS pour selectionner les lignes (coche la case et change la couleur
$('tr').click(function() //Lors d'un clic sur une ligne du tableau
{
    //On récupère le ligne cliqué
    $tr = $(this);
    //On prend la valeur de l'attribut data-tr
    $dataTr = $tr.data('tr');

    //Si on clique sur l'en-tête, on ne fait rien
    if(!$tr.hasClass("en_tete"))
    {	
        //On liste tous les TR qui on le même attribut
        $trList = $("tr[data-tr=" + $dataTr + "]");
        //Si les TR on select          Alors on l'enlève                 Sinon on lui ajoute 
        $trList.hasClass('selected') ? $trList.removeClass('selected') : $trList.addClass('selected');
    }
});