JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tableau">
    	<thead>
    		<tr class=title>
    			<th>Etat</th>
    			<th>Cabine</th>
				<th>Indicatif</th>
				<th>ETD</th>
				<th>ADEP</th>
				<th>ADES</th>
				<th>Detail PLN</th>
				<th>IFF/SIF</th>
				<th>Nb A/C</th>
				<th>N°</th>
				<th>Modification</th>
			</tr>
    	</thead>
    	<tbody>
				<tr><td><select><option>ATT</option><option>CTL</option><option>EVL</option></select></td><td>1</td><td>MARCOU41</td><td>0830</td><td>BC</td><td>T43</td><td>RBT</td><td>6551</td><td>2</td><td>02BC</td><td><button id="modLine">Modifier</button></td></tr>
				<tr><td><select><option>ATT</option><option>CTL</option><option>EVL</option></select></td><td>2</td><td>RAYAK81</td><td>0700</td><td>BM</td><td>SIMONE</td><td>RVT</td><td>6561</td><td>4</td><td>08BM</td><td><button id="modLine">Modifier</button></td></tr>
				<tr><td><select><option>ATT</option><option>CTL</option><option>EVL</option></select></td><td>1</td><td>RIVAGE23</td><td>1730</td><td>BC</td><td>BG</td><td>R49H1</td><td></td><td>3</td><td>06BC</td><td><button id="modLine">Modifier</button></td></tr>
    	</tbody> 
    </table>

<br/>

<button id="addLine">Ajouter</button>
<button id="delLine">Supprimer</button>

CSS

#tableau{
    width : 100%;
    border-collapse: collapse;
    border-spacing: 0;    
}
.title {
   background-color : DeepSkyBlue;
}
table tr:nth-child(even){
    background-color : #CCC;
}

JavaScript

var $newLine = $("<tr><td><select><option>ATT</option><option>CTL</option><option>EVL</option></select></td><td>1</td><td>RIVAGE23</td><td>1730</td><td>BC</td><td>BG</td><td>R49H1</td><td></td><td>3</td><td>06BC</td><td><button id=\"modLine\">Modifier</button></td></tr>");

var optColor = {};
optColor["ATT"] = "blue";
optColor["CTL"] = "red";
optColor["EVL"] = "green";

$("#addLine").click(function(){
    $("#tableau tr:last").after($newLine.clone());
});

$("#delLine").click(function(){
    
    var n = prompt("Numéro de la ligne à supprimer ?\nEntrez une valeur entre 1 et " +  
               ($("#tableau tr").length -1));
    
    $("#tableau tr:eq("+ n +")").remove();

});

$(document).on('change', 'select', function() {
   $(this.closest('tr')).css( {'color': optColor[this.value] });
});

$(document).on('click', '#modLine', function() {
    
    $(this.closest('tr')).find('td').each(function( x,y){
        var html = $(this).html();
        if (html.indexOf("button") > 0){
            $(this).html("<button id=\"valLine\">Valider</button>");
        } else {
            if (html.indexOf("select") < 0 ){
                var input = $('<input size="8" type="text" />');
                input.val(html);
                $(this).html(input);
            }
        }
    });
  
});

$(document).on('click', '#valLine', function() {
    
    $(this.closest('tr')).find('td').each(function( x,y){
        var html = $(this).html();
        if (html.indexOf("button") > 0){
            $(this).html("<button id=\"modLine\">Modifier</button>");
        } else {
            if (html.indexOf("select") < 0 ){
                $(this).html($($(y).find('input')[0]).val());
            }
        }
    });
  
});