Bir tablo sütunundan tarihi al ve satırlar, gün ile

arasındaki gün sayısına bağlı olarak renk değiştirir javascript'te yeni bir kullanıcıyım ve bilmek istiyorum nasıl her gün de tarih td elde edecekti satır, o tarih ile geçerli tarih arasındaki günlerin miktarını hesaplayın ve sayı 100 diyelim ki, bu satırlar kırmızı bir arka plana sahip olsun. İşte kod:Bir tablo sütunundan tarihi al ve satırlar, gün ile

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

kaynak

2016-04-14 AdrianJG

Henüz bir şey denediniz mi? [Javascript'teki tablo tablolarına başvuru] için w3schools bağlantısına bakın (http://www.w3schools.com/jsref/coll_table_cells.asp) – Wold

Bu tablo aslında statik mi, yoksa bir veritabanı sorgusundan mı oluşturuluyor? Bir sorgudan üretiliyorsa, tarih denetimini sorgunun bir parçası olarak yapabilir ve verileri çıktılarken rengi ayarlayabilirsiniz. Bu gerçekten statik ise, HTML üzerinde herhangi bir kontrolünüz var mı? Öyleyse, tarihleri içeren hücrelere bir sınıf özniteliği eklemek (ör. 2012/09/26), tarihleri kontrol etmek için tarihleri bulmayı kolaylaştırır. Aksi takdirde, tablonun her bir satırı boyunca yinelemek ve 5. hücreyi bulmak zorunda kalacaksınız. Bu arada, jQuery bunun için yararlı olacaktır. –

Yanıtlama için teşekkürler, bu, sihirli yazılım kullanan bir verisini alacak statik bir tablodur, bu yüzden söylediğim gibi yapabilirim. Tarih hücresine bir sınıf uygulayabileceğimi ve günlerin farkını hesaplamak ve rengi uygulamak için jqeury kullanabileceğimi mi söylüyorsun? – AdrianJG

Sen document.getElementById (tablonun ID) kullanarak tabloya bakabilirsiniz.

Daha sonra satırlar arasında yineleme yapabilir, tarih değerini alabilir, farkı hesaplayabilir ve tabloyu buna göre değiştirebilirsiniz.

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

kaynak

2016-04-14 20:04:07 someguy

Yanıtladığınız için teşekkür ederiz! Bir sorunum var, kodu belgenin içine yapıştırdığımda, datatable stili kaybolur ve hiçbir şey olmaz. Ayrıca belgenin dışına yapıştırmayı da denedim. – AdrianJG

Tablonun sonunda kendi kod etiketine kodu ekledim. Ayrıca, code table.rows satırının eklenmesi [i] .cells [0] .style.background = "red"; If deyiminde de kırmızı isim yapacak. – someguy

Çok teşekkürler! İşe yaradı! Bitirmeden önce hızlı bir soru, tablonun işlevselliğine zarar vermeden masaüstüne bir fonksiyon eklemek istediğimde ayrı bir senaryo koymalı mıyım? – AdrianJG

Bir tablo sütunundan tarihi al ve satırlar, gün ile

cevap

İlgili konular