未将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应用于插入的表格数据

回答

相关问题