未將CSS應用於插入的表格數據

我有一個包含截止日期的基本任務列表。用於顯示過期日期的CSS腳本有效。如果通過from輸入添加新條目，則css不會應用於逾期項目。我已經在這裏研究了事件代表團並調整了代碼以包含代表團。花了很長時間試圖解決這個問題，但任何幫助將不勝感激。未將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函數的變化，也使用.closest代替.parent。這非常有幫助。 – user3550216

嘗試將CSS應用到細胞該行中，而不是該行本身：

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

來源

2017-10-17 23:44:06 Johannes

非常感謝您的回覆。 – user3550216

未將CSS應用於插入的表格數據

回答

相關問題