2016-04-14 30 views
0

我是一个javascript新手,想知道如何能够从每个日期获得日期td行,计算该日期和当前日期之间的天数,如果该数字大于假设100,则使这些行具有红色背景。下面的代码:从表格列中检索日期,并根据当天和日期之间的天数改变颜色行

 <html> 

<head> 


<title>Due Bills</title> 
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 


<script> 

$(document).ready(function() { 
    $('#example').DataTable({ 
    responsive: true 
    }); 



    $('checkdate').on({  

     var today = new Date(); 
     var currDate = today.getDate(); 
     var date2 = new Date(2015,1,15); 
     var timeDiff = Math.abs(currDate.getTime() - date2.getTime()); 
     var diffDays = Math.ceil(timeDiff/(1000 * 3600 * 24)); 

     if(diffDays > 100){ 

       $("#example tr").css('background-color', '#FF0000'); 

     } 

    }); 

}); 

</script> 


</head> 

<body> 

    <table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Date</th> 
      <th>Salary</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Date</th> 
      <th>Salary</th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td>Tiger Nixon</td> 
      <td>System Architect</td> 
      <td>Edinburgh</td> 
      <td>61</td> 
      <td class="checkdate">2011/04/25</td> 
      <td>$320,800</td> 
     </tr> 
     <tr> 
      <td>Garrett Winters</td> 
      <td>Accountant</td> 
      <td>Tokyo</td> 
      <td>63</td> 
      <td class="checkdate">2011/07/25</td> 
      <td>$170,750</td> 
     </tr> 
     <tr> 
      <td>Ashton Cox</td> 
      <td>Junior Technical Author</td> 
      <td>San Francisco</td> 
      <td>66</td> 
      <td class="checkdate">2009/01/12</td> 
      <td>$86,000</td> 
     </tr> 
     <tr> 
      <td>Cedric Kelly</td> 
      <td>Senior Javascript Developer</td> 
      <td>Edinburgh</td> 
      <td>22</td> 
      <td class="checkdate">2012/03/29</td> 
      <td>$433,060</td> 
     </tr> 
     <tr> 
      <td>Airi Satou</td> 
      <td>Accountant</td> 
      <td>Tokyo</td> 
      <td>33</td> 
      <td class="checkdate">2008/11/28</td> 
      <td>$162,700</td> 
     </tr> 
     <tr> 
      <td>Brielle Williamson</td> 
      <td>Integration Specialist</td> 
      <td>New York</td> 
      <td>61</td> 
      <td class="checkdate">2012/12/02</td> 
      <td>$372,000</td> 
     </tr> 
     <tr> 
      <td>Herrod Chandler</td> 
      <td>Sales Assistant</td> 
      <td>San Francisco</td> 
      <td>59</td> 
      <td class="checkdate">2012/08/06</td> 
      <td>$137,500</td> 
     </tr> 
     <tr> 
      <td>Rhona Davidson</td> 
      <td>Integration Specialist</td> 
      <td>Tokyo</td> 
      <td>55</td> 
      <td class="checkdate">2010/10/14</td> 
      <td>$327,900</td> 
     </tr> 
     <tr> 
      <td>Colleen Hurst</td> 
      <td>Javascript Developer</td> 
      <td>San Francisco</td> 
      <td>39</td> 
      <td class="checkdate">2009/09/15</td> 
      <td>$205,500</td> 
     </tr> 
     <tr> 
      <td>Sonya Frost</td> 
      <td>Software Engineer</td> 
      <td>Edinburgh</td> 
      <td>23</td> 
      <td class="checkdate">2008/12/13</td> 
      <td>$103,600</td> 
     </tr> 
     <tr> 
      <td>Jena Gaines</td> 
      <td>Office Manager</td> 
      <td>London</td> 
      <td>30</td> 
      <td class="checkdate">2008/12/19</td> 
      <td>$90,560</td> 
     </tr> 
     <tr> 
      <td>Quinn Flynn</td> 
      <td>Support Lead</td> 
      <td>Edinburgh</td> 
      <td>22</td> 
      <td class="checkdate">2013/03/03</td> 
      <td>$342,000</td> 
     </tr> 
     <tr> 
      <td>Charde Marshall</td> 
      <td>Regional Director</td> 
      <td>San Francisco</td> 
      <td>36</td> 
      <td class="checkdate">2008/10/16</td> 
      <td>$470,600</td> 
     </tr> 
     <tr> 
      <td>Haley Kennedy</td> 
      <td>Senior Marketing Designer</td> 
      <td>London</td> 
      <td>43</td> 
      <td class="checkdate">2012/12/18</td> 
      <td>$313,500</td> 
     </tr> 




    </tbody> 
</table> 

</body> 

+0

你有没有尝试过什么呢?看看[在javascript中引用表格单元格]的w3schools链接(http://www.w3schools.com/jsref/coll_table_cells.asp) – Wold

+0

该表格是否实际上是静态的,还是从数据库查询中生成?如果它是从查询中生成的,则可以将日期检查作为查询的一部分,并在输出数据时设置颜色。如果这真的是静态的,你有没有对HTML的控制权?如果是这样,则向包含日期的单元格添加类属性(例如, 2012/09/26)可以更容易找到日期以检查它们。否则,您将不得不循环遍历表格的每一行并找到第5个单元格。顺便说一下,jQuery将会对此有所帮助。 –

+0

感谢您的回答,这是一个静态表格,它将使用魔术软件从获取其数据,所以我可以按照您的说法进行操作。你是说我可以将一个类应用到日期单元格中并使用jqeury来计算日期差异并应用颜色? – AdrianJG

回答

1

您可以参考使用的document.getElementById(表的ID)的表。

然后,您可以遍历行,获取日期值,计算差异并相应地更改表。

<script> 
     var table = document.getElementById("example"); 
     for(var i = 0; i < table.rows.length; i ++) { 
     var d = new Date(table.rows[i].cells[4].innerHTML).getTime(); 
     var difference = new Date().getTime(); 
     console.log(((difference - d)/86400000) > 100); 
     if(((difference - d)/86400000) > 100) 
      table.rows[i].style.background = "red"; 
     } 
    </script> 
+0

感谢您的回答!我有一个问题,当我将代码粘贴到document.ready中时,数据表样式会消失并且什么都不会发生。我也试过将它粘贴到document.ready之外,仍然在脚本中。 – AdrianJG

+0

我在自己的脚本标签中添加了表格末尾的代码。另外,添加代码行table.rows [i] .cells [0] .style.background =“red”;在if语句中也会使名称变成红色。 – someguy

+0

非常感谢!有效!在我们完成之前的一个简短问题,每当我想添加一个功能到表而不损坏数据表我必须把一个单独的脚本? – AdrianJG

相关问题