Datum aus einer Tabellenspalte abrufen und die Zeilen Farbe ändern abhängig von der Anzahl der Tage zwischen heute und dem Datum

Ich bin ein Neuling bei Javascript und würde gerne wissen, wie ich in der Lage wäre, de date td von jedem zu erhalten Zeile, berechnen Sie die Anzahl der Tage zwischen diesem Datum und dem aktuellen Datum, und wenn die Zahl größer ist als sagen wir 100, machen Sie diese Zeilen einen roten Hintergrund. Hier ist der Code:Datum aus einer Tabellenspalte abrufen und die Zeilen Farbe ändern abhängig von der Anzahl der Tage zwischen heute und dem Datum

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

Quelle

2016-04-14 AdrianJG

Haben Sie schon etwas versucht? Werfen Sie einen Blick auf den Link w3schools für [Verweis auf Tabellenzellen in JavaScript] (http://www.w3schools.com/jsref/coll_table_cells.asp) – Wold

Ist diese Tabelle tatsächlich statisch oder wird sie aus einer Datenbankabfrage generiert? Wenn es aus einer Abfrage generiert wird, können Sie die Datumsprüfung als Teil der Abfrage durchführen und die Farbe bei der Ausgabe der Daten festlegen. Wenn das wirklich statisch ist, haben Sie irgendeine Kontrolle über das HTML? Wenn dies der Fall ist, kann das Hinzufügen eines Klassenattributs zu den Zellen, die die Daten enthalten (z.B. 2012/09/26), das Finden der Daten erleichtern, um sie zu überprüfen. Andernfalls müssen Sie jede Zeile der Tabelle durchlaufen und die fünfte Zelle suchen. Übrigens wäre jQuery hier hilfreich. –

Danke für die Beantwortung, dies ist eine statische Tabelle, die ihre Daten von einem mit magischen Software bekommen, so kann ich es tun, wie Sie sagten. Sie sagen, ich kann eine Klasse auf die Datumszelle anwenden und jqeury verwenden, um die Differenz von Tagen zu berechnen und die Farbe anzuwenden? – AdrianJG

Sie können die Tabelle verweisen mit document.getElementById (ID-Tabelle).

Sie können dann durch die Zeilen iterieren, den Datumswert ermitteln, die Differenz berechnen und die Tabelle entsprechend ändern.

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

Quelle

2016-04-14 20:04:07 someguy

Danke für die Antwort! Ich habe ein Problem, wenn ich den Code in das Dokument einfügen.ready verschwindet das Datat Styling und nichts passiert. Ich habe auch versucht, es außerhalb des Dokuments einzufügen. Bereits im Skript. – AdrianJG

Ich habe den Code am Ende der Tabelle in einem eigenen Skript-Tag hinzugefügt. Außerdem fügen Sie die Codezeile hinzu. Table.rows [i] .cells [0] .style.background = "red"; in der if-Anweisung wird auch der Name rot. – someguy

Vielen Dank! Es funktionierte! Eine kurze Frage, bevor wir fertig sind, wann immer ich eine Funktionalität zu der Tabelle hinzufügen möchte, ohne die Datentabelle zu beschädigen, muss ich ein separates Skript einfügen? – AdrianJG

Datum aus einer Tabellenspalte abrufen und die Zeilen Farbe ändern abhängig von der Anzahl der Tage zwischen heute und dem Datum

Antwort

Verwandte Themen