JSFiddle - React, Tailwind, and code Playground

by Flavors

HTML

<div id="tableau">
				<table>
					<thead> <tr class="en_tete"> <th></th> <th>Marque</th> <th>Modele</th> <th>Couleur</th> <th>Nb Options</th> </tr> </thead>
					<tbody>
                        <TR class="ligne_tableau_1">
                            <TD rowSpan="2"><INPUT type="checkbox" name="choix" value="1" /></TD>
                            <TD rowSpan="2">citroen</TD>
                            <TD rowSpan="2">picasso</TD>
                            <TD>blanc</TD>
                            <TD>2</TD>
                        </TR>
                        <TR class="ligne_tableau_1">
                            <TD>bleue</TD>
                            <TD>18</TD>
                        </TR>
                        <TR class="ligne_tableau_2">
                            <TD rowSpan="2"><INPUT type="checkbox" name="choix" value="1" /></TD>
                            <TD rowSpan="2">peugeot</TD>
                            <TD rowSpan="2">208</TD>
                            <TD>rouge</TD>
                            <TD>2</TD>
                        </TR>
                        <TR class="ligne_tableau_2">
                            <TD>grise</TD>
                            <TD>5</TD>
                        </TR>
                        <TR class="ligne_tableau_3">
                            <TD rowSpan="2"><INPUT type="checkbox" name="choix" value="1" /></TD>
                            <TD rowSpan="2">porshe</TD>
                            <TD rowSpan="2">boxer </TD>
                            <TD>blanche</TD>
                            <TD>2</TD>
                        </TR>
                        <TR class="ligne_tableau_3">
                            <TD>noire</TD>
                            <TD>10</TD>
                        </TR>
                        <TR class="ligne_tableau_4">
                            <TD rowSpan="3"><INPUT type="checkbox" name="choix" value="1" /></TD>
                            <TD...

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

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
				{
					$classe = $(this).attr('class')//On recupére le nom de la classe de la ligne sur laquelle on a cliqué 
					if($classe != "en_tete")//Si on clique sur l'en-tête, on ne fait rien
					{	
						$classe= "." + $classe;//On concaténe le nom de la classe récupéré pour le formaté "ligne_tableau_x" -> ".ligne_tableau_x"
						$case_a_cocher = $($classe).find("input[type=checkbox]");//On recupere l'element checkbox pour pouvoir tester sa valeur et agir dessus 
						
						if($($case_a_cocher).is(":checked"))//Si la case est cochée
						{	
							$($case_a_cocher).prop('checked',false);
							$($classe).css("background-color","transparent");//On change la couleur de la ligne (toute la hauteur du rowspan)
						}
						else//Si la case n'est pas cochée
						{
							$($case_a_cocher).prop('checked',true);
							$($classe).css("background-color","#e9f8ff");//On change la couleur de la ligne (toute la hauteur du rowspan)
						}
					}
				});