CSS non appliqué aux données de table insérées

J'ai une liste de tâches de base avec les dates d'échéance. Le script CSS pour montrer les dates de retard fonctionne. Si j'ajoute de nouvelles entrées via l'entrée from, le CSS n'est pas appliqué aux articles en retard. J'ai recherché la délégation d'événement ici et ai ajusté le code pour inclure .on pour la délégation. Passé un long moment à essayer de résoudre ce problème, mais toute aide serait appréciée.CSS non appliqué aux données de table insérées

<head> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $(".add-row").on('click', function() { 
      var task = $("#task").val(); 
      var date = $("#date").val(); 
      var markup = "<tr><td>" + task + "</td><td>" + date + "</td></tr>"; 
      $('table tbody').append(markup); 
     }); 
    }); 
    </script> 
    <script> 
    $(function() { 
     $('table td').each(function() { 
      var row_date = 
       Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, 
        '$2/$1/$3')); 
      var now_date = new Date().getTime(); 
      if (row_date < now_date) { 
       $(this).parent('tr').addClass('past'); 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <form> 
     <input type="text" id="task" placeholder="task" /> 
     <input type="text" id="date" placeholder="dd/mm/yyyy" /> 
     <input type="button" class="add-row" value="Add Row" /> 
    </form> 
    <table id="task_table"> 
     <thead> 
      <tr> 
       <th>Task</th> 
       <th>Date</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Mow lawn</td> 
       <td>01/02/2017</td> 
      </tr> 
      <tr> 
       <td>Clean car</td> 
       <td>01/02/2017</td> 
      </tr> 
      <tr> 
       <td>Empty bins</td> 
       <td>01/02/2018</td> 
      </tr> 
     </tbody> 
    </table> 
    <style> 
    #task_table tr.past { 
     background: #ff8a33; 
    } 
    </style> 
</body> 
</html>

Source

2017-10-17 user3550216

vous allez devoir nous montrer le CSS si vous voulez aider à –

Il suffit de déplacer la date logique de comparaison où vous ajoutent des dates à la table sur l'entrée de l'utilisateur. – Arvind

Je l'ai fait une jsFiddle qui vous fait en partie là. Il y a toujours un problème lorsque vous chargez, mais vous devriez aller:

$(document).ready(function(){ 
    $(".add-row").on('click',function(){ 
     var task = $("#task").val(); 
     var date = $("#date").val(); 
     var markup = "<tr><td>" + task + "</td><td>" + date + "</td></tr>"; 
     $('table tbody').append(markup); 
       checkDate(); 
    }); 

     function checkDate() { 
      $('table td').each(function() { 
       var row_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3')); 
       var now_date = new Date().getTime(); 

       if(row_date < now_date) { 
         $(this).closest('tr').addClass('past'); 
       } 
     }); 
    } 
});

jsfiddle

Source

2017-10-17 23:51:01 stevelacerda7

Très bien, je peux voir les changements de nommer la fonction checkDate, et aussi en utilisant .closest au lieu de .parent. Cela a été d'une grande aide. – user3550216

Essayez d'appliquer le CSS aux cellules de cette ligne, et non à la ligne elle-même:

#task_table tr.past td { 
    background: #FF8A33; 
}

Source

2017-10-17 23:44:06 Johannes

Un grand merci pour votre réponse. – user3550216

CSS non appliqué aux données de table insérées

Répondre

Questions connexes