挿入されたテーブルデータにCSSが適用されていません

私は期限付きの基本タスクリストを持っています。延滞日を表示するためのCSSスクリプトが動作します。私が入力から新しいエントリを追加すると、期限切れのアイテムにCSSが適用されません。私はここでイベントデリゲーションを調査し、代理人に.onを含めるようにコードを調整しました。これを解決しようとしている間、長い時間を費やしましたが、どんな助けもありがたいです。挿入されたテーブルデータにCSSが適用されていません

<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>

出典

2017-10-17 user3550216

はあなたがどこにロジックを比較するだけで日付を移動 –

を手助けしたい場合は、私たちにCSSを表示する必要があるとしていますユーザーの入力時にテーブルに日付を追加しています。 – Arvind

私は部分的にそこにあなたを取得jsfiddleをしました。そこには、ロードの問題はまだだが、それはあなたが軌道に乗る必要があります。

$(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

出典

2017-10-17 23:51:01 stevelacerda7

非常に良いですが、私は関数checkDateの名前を変更し、.parentの代わりに.closestを使用するという変更を見ることができます。これはとても役に立ちました。 – user3550216

その行のセルに、ない行自身にCSSを適用するようにしてください：

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

出典

2017-10-17 23:44:06 Johannes

ご返信ありがとうございました。 – user3550216

挿入されたテーブルデータにCSSが適用されていません

答えて

関連する問題