JSFiddle - React, Tailwind, and code Playground

HTML

<form method="POST" id="form" name="form">
    <div class="top-shadow">
        <table class="flatTable" table border="0" CELLSPACING="0" >
            <tr class="titleTr">
                <td class="titleTd">Liste des capteurs</td>
                <td colspan="4"></td>
                <td class="plusTd button"></td>
                <td class="plusTd3 button"><button type="button">Valider</button></td>
            </tr>
            <tr class="headingTr">
                <td>Index du capteur</td> 
                <td><center>Nom du capteur</center></td> 
                <td><center>Identifiant du capteur</center></td> 
                <td><center>Type du capteur</center></td> 
                <td><center>Table correspondant au capteur</center></td>
                <td><center>Supprimer le capteur</center></td>
                <td><center>Edition&nbsp;</center></td>
                <td></td>
            </tr>
            <tr class="contenu">
                <td><center>1</center></td> 
                <td><center>Chaufferie_T</center></td> 
                <td><center>17946</center></td> 
                <td><center>1</center></td> 
                <td><center>tp_arexx_17946_1</center></td>
                    <section title=".squaredFour">
                    <!-- .squaredFour -->
                        <div class="squaredFour">
                            <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="1" /></td> 
                            <label for="squaredFour"></label> 
                        </div>
                    <!-- end .squaredFour -->
                    </section>
                <td class="controlTd"></td>
                <td class="controlTd1"><button type="button">Annuler</button></td>
            </tr>
            <tr class="contenu">
                <td><center>2</center></td> 
                <td><center>Chaufferie_H</center></td> 
                <td><center>17946</center></td> 
    ...

CSS

* {
    margin: 0;
    padding: 0;
    font-family: Lato;
}
.flatTable {
    width: 1200px;
    border-collapse: collapse;
    font-weight: bold;
    color: #6b6b6b;
    border : none;
    text-align: center;
    vertical-align:middle;
    -webkit-box-shadow: 0px 3px 25px 10px rgba(0, 0, 0, 0.55);
    -moz-box-shadow: 0px 3px 25px 10px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 3px 25px 10px rgba(0, 0, 0, 0.55);
}
.flatTable tr {
    height: 50px;
    background: #d4d1d5;
    border-bottom: rgba(0, 0, 0, 0.05) 1px solid;
    text-align: center;
    vertical-align:middle;
}
.flatTable td {
    box-sizing: border-box;
    text-align: center;
    vertical-align:middle;
}
.flatTable .titleTr {
    height: 70px;
    color: #f6f3f7;
    background: #418a95;
}
.flatTable .plusTd {
    background: url(http://i.imgur.com/3hSkhay.png) center center no-repeat, rgba(0, 0, 0, 0.1);
    float: right;
    height: 70px;
    width: 80px;
    padding-top: 25px;
    box-sizing: border-box;
}
.flatTable .plusTd1 {
    background: url("http://i.imgur.com/3hSkhay.png") no-repeat scroll center center, none repeat scroll 0% 0% rgba(0, 0, 0, 0.1);
    height: 70px;
    width: 80px;
    position: absolute;
    box-sizing: border-box;
    padding-top: 25px;
    float: left;
    margin-right: -100px;
    margin-left: -240px;
}
.flatTable .plusTd2 {
    background: url("http://i.imgur.com/nnzONel.png") no-repeat scroll center center, none repeat scroll 0% 0% rgba(255, 0, 0, 0.4);
    position: absolute;
    height: 70px;
    width: 80px;
    padding-top: 25px;
    box-sizing: border-box;
    margin-left: -80px;
}
.flatTable .plusTd3 {
    background: url(valid.png) center center no-repeat, rgba(0, 0, 0, 0.1);
    height: 70px;
    width: 80px;
    padding-top: 25px;
    box-sizing: border-box;
}
.flatTable .plusTd4 {
    background: url("valid.png") no-repeat scroll center center, none repeat scroll 0% 0% rgba(0, 0, 0, 0.1);
    height: 70px;
    width: 80px;
    padding-top: 25px;
   ...

JavaScript

var data = [
    {'Arexx_index': 1, 'Arexx_Id': 17946, 'Arexx_Type': 1, 'Arexx_Table': 'tp_arexx_A7946_1', 'Arexx_Name': 'Chaufferie_T'},
    {'Arexx_index': 2, 'Arexx_Id': 17946, 'Arexx_Type': 3, 'Arexx_Table': 'tp_arexx_17946_3', 'Arexx_Name': 'Chaufferie_H'}
];

var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index'];

var $controlTd = $('.controlTd'),
    $controlTd1 = $('.controlTd1');

$controlTd.on('click', function() {    
    var $this = $(this),
        $tr = $this.closest('tr');
    
    $this.hide();
    $this.next().show();

    if (!$tr.hasClass('isEditable')) {
        $tr.find('td center').each(function(){ 
            var contenuElement = $(this).text(); 
            $(this).html("<input class='modif_input'STYLE='Text-ALIGN:center'/>");
            $(this).children("input").val(contenuElement);
        });
        
        $tr.addClass('isEditable');
    }
});

$controlTd1.hide().on('click', 'button', function() {    
    var $this = $(this), 
        $tr = $this.closest('tr'),
        $cells = $tr.find('td');
    
    $this.parent().hide();
    $this.parent().prev().show();
    
    if ($tr.hasClass('isEditable')) {
        $cells.each(function (index, elt) { 
            $(this).find('input[type="text"]').remove();
            $(this).find('center').text(data[$tr.index() - 2][keyByIndex[index]]);
        });
        
        $tr.removeClass('isEditable');
    }
});