html表内的多个Jquery倒计时答案

【问题标题】：Multiple Jquery Countdowns inside html tablehtml表内的多个Jquery倒计时
【发布时间】：2013-04-04 04:41:39
【问题描述】：

我正在开展一个项目，我需要在一个页面上显示多个拍卖的状态。每个项目都有不同的结束日期。我正在使用cfquery 从数据库中提取数据，然后使用cfoutput 构建一个表。那部分很好。那里没有问题。我的问题是，如何在表格中放置多个 Keith Wood's countdown timer 实例，以便每个项目都有倒计时？

这是我的表格标题：

<table id="large" class="tablesorter" border="0" CELLSPACING="1" CELLPADDING="0" width="50%">
<thead>
<tr class="tablesorter-headerRow">
    <th id="itemnum"  class="sorter-numeric">ItemNum</th>
    <th id="highbidder"  class="sorter-numeric">HighBidder</th>
    <th id="closenum"  class="sorter-numeric">Time Left</th>
    <th id="highbidprice"  class="sorter-numeric">HighBid</th>
</tr>
</thead>
<tbody>
<cfoutput>
<!--- Code builds the table body --->
<div class="countdown-styled clearfix" style="width:200px;"></div>
</cfoutput>
</tbody>
</table>

我看过这些：1) Jquery multiple coundown 2) multiple countdowns on same page with jquery 但这些似乎包括每个页面的唯一行 ID，然后是其他一些 jquery 代码，或者只是对 id 进行硬编码。问题是我不知道最终版本会有多少项目。现在我有 35 个，但这不是恒定的，所以我不能这样做。有什么想法或帮助吗？真的很感激。

【问题讨论】：

表体输出是什么样的？它的结构将直接影响您用来触发倒计时的 jQuery。

标签： jquery html-table jquery-countdown

【解决方案1】：

这是他网站上的示例：

$(selector).countdown({until: new Date(2010, 12-1, 25)});

我假设你正在做这样的事情：

$('.countdown-styled').countdown({until: someDate});

所以想法是每个$('.countdown-styled')都有不同的日期，你只需要弄清楚如何为每个不同的元素指定日期。

$('.countdown-styled').each(function (idx) {
    var date = $(this).closest('tr').find('.date-label').text();

    $(this).countdown({ until: new Date(date) });
});

当然，我不知道从哪里获取日期，因为我看不到您的所有代码，并且您可能需要调整从显示中生成 javascript Date 对象的代码，但这应该得到你开始了。

【讨论】：