JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<input id="dateApplicationEffGlobal" type="text" value="" class="datepicker">
    <br/>
    <br/>
<table id="datatable">
    <tr class="odd">
        <td><input type="checkbox" class="chkDateEff"/></td>
        <td class="">PIECE</td>
        <td class=""><input id="prixAchatAccepte_100424" type="text" value="1,8"></td>
        <td class="dateEff"><input id="dateApplicationEff_100424" class="datepicker" type="text" value=""></td>
    </tr>
            <tr class="even">
        <td><input type="checkbox" class="chkDateEff"/></td>
        <td class="">PIECE</td>
        <td class=""><input id="prixAchatAccepte_100424" type="text" value="1,8"></td>
        <td class="dateEff"><input id="dateApplicationEff_100424" class="datepicker" type="text" value=""></td>
    </tr>
            <tr class="odd">
        <td><input type="checkbox" class="chkDateEff"/></td>
        <td class="">PIECE</td>
        <td class=""><input id="prixAchatAccepte_100424" type="text" value="1,8"></td>
        <td class="dateEff"><input id="dateApplicationEff_100424" class="datepicker" type="text" value=""></td>
    </tr>
            <tr class="even">
        <td><input type="checkbox" class="chkDateEff"/></td>
        <td class="">PIECE</td>
        <td class=""><input id="prixAchatAccepte_100424" type="text" value="1,8"></td>
        <td class="dateEff"><input id="dateApplicationEff_100424" class="datepicker" type="text" value=""></td>
    </tr>
            <tr class="odd">
        <td><input type="checkbox" class="chkDateEff"/></td>
        <td class="">PIECE</td>
        <td class=""><input id="prixAchatAccepte_100424" type="text" value="1,8"></td>
        <td class="dateEff"><input id="dateApplicationEff_100424" class="datepicker" type="text" value=""></td>
    </tr>
            <tr class="even">
        <td><input type="checkbox" class="chkDateEff"/></td>
        <td class="">PIECE</td>
        <td class=""><input id="prixAchatAccepte_100424" type="text" value="1,8"></td>
        <td...

CSS

table tr.odd {
background-color: #E2E4FF;
}
table tr.even {
background-color: white;
}

JavaScript

//initialisation
$(".datepicker").datepicker();

//changement de la date globale
$("#dateApplicationEffGlobal").change(function(){
    var dateEffGlobale = $(this).val();
    console.log(dateEffGlobale);
    $("#datatable").find("tr .chkDateEff:checked").each(function(){
        var dateEff = $(this).closest("tr").find(".dateEff");
        console.log(dateEff.val());
        if(dateEff.val() == null || dateEff.val() == ""){
            console.log(yep);
            dateEff.val(dateEffGlobale);
        }        
    });
});
$(".chkDateEff").change(function(e){
    var dateEff = $(this).closest("tr").find(".dateEff");
    //coche d'une case
    if($(this).is(":checked")){
        if(dateEff.val() == null || dateEff.val() == ""){
            dateEff.val($("#dateApplicationEffGlobal").val());
        }
    }else{
    //decoche d'une case
        dateEff.val("");
    }
});