如何在数组中收集 id="tripDate" 的整个 <td> 内部 html，并使用当前日期执行检查每个 td 值

Posted 2023-05-07

【中文标题】如何在数组中收集 id="tripDate" 的整个 <td> 内部 html，并使用当前日期执行检查每个 td 值

【英文标题】：How to collect entire <td> inner html with id="tripDate" in an array, and perform checking each td values with current date

【发布时间】：2017-03-20 18:08:06

【问题描述】：

如何将整个 td 的内部 html 与 id="tripDate" 收集到一个数组中，并使用 javascript 或 jquery 执行检查每个 td 值与当前日期。

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

【问题讨论】：

您有多个具有相同id 的元素，这是无效的，也是问题的主要原因。改为将它们更改为类。然后您也可以使用map() 来构建您的阵列。将td 的值转换为可以比较的日期时也会遇到问题，因为它们的当前值不能直接解析为 Date 对象。您需要进行一些字符串修改才能使其正常工作。我建议你研究一下 JS 中的日期解析。

@RoryMcCrossan 你应该在 map() 上写一本书：P

@Mahi 这是我最喜欢的 jQuery 方法 :)

【参考方案1】：

你像下面这样迭代：

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

在这里找到工作代码：http://jsbin.com/juqomonuci