2016-04-14 14 views
0

私はjavascriptの初心者で、どのようにして毎日の日付を取得できるのか知りたいですその日と現在の日付の間の日数を計算し、その数値が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の中にコードを貼り付けると、datatableスタイルが消えて何も起こらないという問題があります。私はまた、ドキュメントの外にそれを貼り付けようとしました。まだスクリプト内にあります。 – AdrianJG

+0

テーブルの最後に独自のscriptタグでコードを追加しました。また、コード行を追加するtable.rows [i] .cells [0] .style.background = "red"; ifステートメントでは、名前も赤になります。 – someguy

+0

ありがとう!出来た!データテーブルを損傷することなくテーブルに機能を追加したい場合は、別のスクリプトを置く必要があります。 – AdrianJG

関連する問題