JSFiddle - React, Tailwind, and code Playground

by yinyann

HTML

<table border="1">
    <tr>
        <th>blah</th>
        <th>blah</th>
        <th>blah</th>
        <th></th>
        <th class="hidden">caché</th>
    </tr>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td>
            <span id="suppression"><input type="button" value="  X  " /></span>
            <span id="annulation"><a href="javascript:void(0);">annuler</a></span>
        </td>
        <td class="hidden"><input type="checkbox" name="supprimeIds" value="1" /></td>
    </tr>
</table>

<div id="formulaire">Saisie des informations</div>
<div id="message">Pas de saisie car on supprime</div>

CSS

.hidden { display:none }

JavaScript

// Script destiné à la page
// C'est elle qui gère l'affichage ou non de la div, pour cela elle s'abonnera à un eventhandler du script de gestion des boutons (que tu vas ajouter)
$(document).ready(function(){
    DeleteInList.eventHandler.on("change", function(e,somethingToDelete){
        if(somethingToDelete){
            $("#formulaire").hide();
            $("#message").show();
        }
        else{
            $("#formulaire").show();
            $("#message").hide();
        }
    });
});




// Dans le fichier javascript nommé JqGridDeleteInList (ou quelque chose approchant)
//   il faut y ajouter
//        - l'eventHandler
//        - une fontion qui utilise l'eventhandler pour avertir la page qu'il y a une modif
//        - l'appel de la fonction chaque fois qu'on modifie une checkbox (2 endroits dans le script) 

var DeleteInList = {
    eventHandler : $('<input type="text" />'),   // <= ajouter ceci, c'est un contrôle qu'on n'ajoute pas vraiment à la page, mais qui va rester en mémoire pour la gestion d'évênements
    
    notifyChange : function(){  //  <= Ajouter la fonction de notification
        var somethingToDelete = $("input[name='supprimeIds']:checked").length > 0;
        DeleteInList.eventHandler.trigger("change", somethingToDelete);
    },

    
    annulationMode : function(){
        DeleteInList.suppressionSpan.hide();
        DeleteInList.annulationSpan.show();
        DeleteInList.checkBox.prop('checked', true);
        DeleteInList.notifyChange();  //  <= Ajouter l'appel
    },
    
    suppressionMode : function(){
        DeleteInList.suppressionSpan.show();
        DeleteInList.annulationSpan.hide();
        DeleteInList.checkBox.prop('checked', false);
        DeleteInList.notifyChange();  //  <= Ajouter l'appel
    },
    
    // c'est tout !!!
    
    
    suppressionSpan : $("#suppression"),
    annulationSpan : $("#annulation"),
    checkBox : $("input[name='supprimeIds']"),
    
    Init : function(){
       ...