JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<button class="btn btn-primary activeTable">Modifier les données</button>
<button class="btn btn-danger unActiveTable">Annuler</button>
<table class="table table-striped table-bordered">
<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"></td>
</tr>
<tr class="contenu">
    <td><center>2</center></td> 
    <td><center>Chaufferie_H</center></td> 
    <td><center>17946</center></td> 
    <td><center>3</center></td> 
    <td><center>tp_arexx_17946_3</center></td>
    <section title=".squaredFour">
        <!-- .squaredFour -->
        <div class="squaredFour">
            <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td> 
            <label for="squaredFour"></label> 
        </div>
        <!-- end .squaredFour -->
    </section>
    <td class="controlTd"></td>
    <td class="controlTd1"></td>
</tr>
</table>
<div id="consoleLog"></div>

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'];

$('.activeTable').on('click', function () {
    if (!$('.contenu').hasClass('isEditable')) {
        $(".contenu td center").each(function(){ 
            var contenuElement = $(this).text(); 
            $(this).html("<input class='modif_input'STYLE='Text-ALIGN:center'/>");
            $(this).children("input").val(contenuElement);
        });
    
        $('.contenu .controlTd1').empty().append('<button class="btn btn-default">Annuler</button>');
        $('.contenu').addClass('isEditable');
    }
});

$('.unActiveTable').on('click', function () {
    if ($('.contenu').hasClass('isEditable')) {
        $('.contenu').each(function () {
            $tr = $(this);
            $tr.find('td center').each(function (index) {
                $(this).find('input[type="text"]').remove();
                $(this).text(data[$tr.index()][keyByIndex[index]]);
            });
            $tr.find('.controlTd1').empty();
        });
         $('.contenu').removeClass('isEditable');
    }
});

// Délégation d'événement car le <button> n'est pas créer lors de la déclaration de l'événement.
$('.controlTd1').on('click', 'button', function () {
    var $this = $(this), 
        $tr = $this.closest('tr'),
        $cells = $tr.find('td');

    $cells.each(function (index, elt) { 
        $(this).find('input[type="text"]').remove();
        $(this).find('center').text(data[$tr.index()][keyByIndex[index]]);
    });
});