2016-11-07 1 views
0

Comment collecter tout le code html interne de td avec id = "tripDate" dans un tableau, et vérifier chaque td avec la date du jour en utilisant JavaScript ou jquery.Comment collecter entier <td> html interne avec id = "tripDate" dans un tableau, et effectuer la vérification de chaque valeur td avec la date actuelle

<table class="w3-table-all w3-small w3-responsive"> 
    <thead> 
     <tr class="w3-green"> 
      <th style="padding:15px; font-weight:bold;">Departure Dates</th> 
      <th style="padding:15px; font-weight:bold;">Departure Availablity</th> 
      <th style="padding:15px; font-weight:bold;">Trip Cost</th> 
      <th style="padding:15px; font-weight:bold;">Inquiry</th> 
     </tr> 
    </thead> 
    <tr class="w3-hover-pale-green"> 
     <td id="tripDate"><?=$ddate1='March, 21, 2017 - April, 06, 2017'?></td> 
     <td class="available">Available</td> 
     <td>USD$ 1250.00</td> 
     <td><a class="w3-btn w3-small w3-green w3-hover-green fancybox fancybox.iframe" href="<?=ROOTDIR.$_PHPLIB['contact']?>index.php?trpName=<?=$tripName?>&trpDate=<?=$ddate1;?>&trpUrl=<?=$actual_link;?>">Inquiry</a></td> 
    </tr>  
    <tr class="w3-hover-pale-green"> 
     <td id="tripDate"><?=$ddate1='March, 28, 2017 - April, 13, 2017'?></td> 
     <td class="available">Available</td> 
     <td>USD$ 1250.00</td> 
     <td><a class="w3-btn w3-small w3-green w3-hover-green fancybox fancybox.iframe" href="<?=ROOTDIR.$_PHPLIB['contact']?>index.php?trpName=<?=$tripName?>&trpDate=<?=$ddate1;?>&trpUrl=<?=$actual_link;?>">Inquiry</a></td> 
    </tr> 
    <tr class="w3-hover-pale-green"> 
     <td id="tripDate"><?=$ddate1='April, 04, 2017 - April, 20, 2017'?></td> 
     <td class="available">Available</td> 
     <td>USD$ 1250.00</td> 
     <td><a class="w3-btn w3-small w3-green w3-hover-green fancybox fancybox.iframe" href="<?=ROOTDIR.$_PHPLIB['contact']?>index.php?trpName=<?=$tripName?>&trpDate=<?=$ddate1;?>&trpUrl=<?=$actual_link;?>">Inquiry</a></td> 
    </tr> 
</table> 
var currentDate = new Date(); 
var IDs = []; 

$('.w3-table-all').find("td[id='tripDate']").each(function() { 
    IDs.push(this.id); 
}); 

$.each(IDs, function(index, value) { 
    var actualDates = document.getElementById(value).innerHTML; 
    // didn't get all the values something went wrong ????? 
    if (actualDates < currentDate) { 
     //do something good 
    } 
}); 
+3

Vous avez plusieurs éléments avec le même 'id' qui est invalide et la principale cause de ton problème. Changez-les en classe à la place. Vous pouvez également utiliser 'map()' pour construire votre tableau. Vous aurez également un problème pour convertir les valeurs du 'td' en dates qui peuvent être comparées, car leurs valeurs actuelles ne peuvent pas être directement analysées par les objets Date. Vous aurez besoin de faire du piratage de chaînes pour le faire fonctionner. Je vous suggère de rechercher l'analyse de date dans JS. –

+0

@RoryMcCrossan vous devriez écrire un livre sur la carte(): P – Mahi

+1

@Mahi c'est ma méthode jQuery préférée :) –

Répondre

1

Vous itérer comme suit:

var now = new Date(); 

$(".w3-table-all td[id='tripDate']").each(function() { 
     var currentTripDateRange = this.innerText 
      , currentTripDates = currentTripDateRange.split(' - ') 
      , startDate =Date.parse(currentTripDates[0]) 
      , lastDate =Date.parse(currentTripDates[1]); 

     if(now >= startDate && now <= lastDate){ 
      //here is your selected dateRange 
      log(currentTripDateRange); 
     } 
    }); 

Trouver le code de travail ici: http://jsbin.com/juqomonuci