html表中的多个Jquery倒计时 [英] Multiple Jquery Countdowns inside html table
问题描述
大家好。我正在制作一个html表格，它将显示各种拍卖的状态。我正在使用两个不同的jquery插件：Keith Wood的倒数计时器 http://keith-wood.name/countdown.html [ ^ ]和jquery tablesorter http://tablesorter.com/docs/ [ ^ ]。我使用这些因为我不是非常流利的jquery。我的优势是c＃和.net语言。无论如何，此页面上将显示约35种不同的项目。每个都剩下一个时间字段。我的工作是能够将倒计时时钟放在表格中每行倒计时的时间内。我知道如何做一次：
Hi all. I''m working on a html table that will display the status of various auctions. I am using two different jquery plugins: Keith Wood''s countdown timer http://keith-wood.name/countdown.html[^] and the jquery tablesorter http://tablesorter.com/docs/[^]. I use these because I''m not super fluent in jquery. My strength is c# and .net languages. Anyway, there are around 35 different items that will be displayed on this page. Each with a time left field. My job is to be able to place the countdown clock inside of each row in the table that will countdown the time. I know how to do it once:
<div class="countdown-styled" style="width:200px;">
使用此jquery代码：
With this jquery code:
$(function() {
// This function Starts the countdown
var endDate = new Date();//("#cYear#","#cMonth#" -1,"#cDay#","#cHour#","#cMinute#","#cSecond#");
endDate.setFullYear(#cYear#,#cMonth#-1,#cDay#);
endDate.setHours(#cHour#+1);
endDate.setMinutes(#cMinute#);
endDate.setSeconds(#cSecond#);
$('.countdown-styled').countdown({
until: endDate,
format: 'dHMS',
render: function(data) {
var el = $(this.el);
el.empty()
.append("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div>")
.append("<div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div>")
.append("<div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div>")
.append("<div>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>")
}
});
});
这很容易。我不知道的是如何在每个表格行中包含多个实例，每个项目都有一个唯一的时间。
这是我当前的代码建造桌子。服务器语言是ColdFusion。数据由cfquery从服务中检索，然后在tbody内输出：
That''s easy. What I don''t know is how to include multiple instances of this inside of each table row with a unique time for each item.
Here is my current code for building the table. The server language is ColdFusion. The data is retrieved from the serve by a cfquery and then outputted inside the tbody:
<tbody>
<cfoutput query="MyQuery">
<tr>
<td>#MyQuery.ItemNum#</td>
<td>#MyQuery.HighBidNum#</td>
<!--- This parses the time format from the server --->
<cfif auctionclosenum GT 999>
<cfset cYear=Left(AuctionCloseNum, 4)>
<cfset cMonth=Right(Left(AuctionCloseNum, 6), 2)>
<cfset cDay=Right(Left(auctionclosenum, 8), 2)>
<cfset cSecond=Right(left(auctionclosenum, 14), 2)>
<cfset cMinute=Right(left(auctionclosenum, 12), 2)>
<cfset cHour=Right(left(auctionclosenum, 10), 2)>
<cfset Date="#cMonth#/#cDay#/#cYear#">
<cfset Time="#cHour#:#cMinute#:#cSecond#">
<cfset DateTime="#TimeFormat(Time, "h:mm tt")#<br>#DateFormat(Date , "ddd MMM D")#">
</cfif>
<!--- Here is where the countdown timer goes --->
<td>#DateTime#<div class="countdown-styled" style="width:200px;"></div></td>
<!---<div class="countdown-styled clearfix" style="width:200px;"></div>--->
<cfset cHighBid=DollarFormat(HighBid)>
<td>#cHighBid#</td>
</tr>
</cfoutput>
</tbody>
任何人都可以帮助我吗？
Can anyone help me please?
推荐答案
（ function （）{
// 此函数开始倒计时
var endDate = new 日期（）; // （＃cYear＃，＃cMonth＃-1，＃cDay＃，＃cHour＃，＃cMinute＃，＃cSecond＃ ）;
endDate.setFullYear（#cYear＃，＃cMonth＃-1，＃cDay＃）;
endDate.setHours（＃cHour＃+ 1）;
endDate.setMinutes（#cMinute＃）;
endDate.setSeconds（#cSecond＃）;
(function() { // This function Starts the countdown var endDate = new Date();//("#cYear#","#cMonth#" -1,"#cDay#","#cHour#","#cMinute#","#cSecond#"); endDate.setFullYear(#cYear#,#cMonth#-1,#cDay#); endDate.setHours(#cHour#+1); endDate.setMinutes(#cMinute#); endDate.setSeconds(#cSecond#);
（' .countdown-styled'）。倒计时（{
until：endDate，
格式：' dHMS'，
render： function （data）{
var el =
('.countdown-styled').countdown({ until: endDate, format: 'dHMS', render: function(data) { var el =
（ this .el）;
el.empty（）
.append（ < div> + this .leadingZeros(data.days,< span class =code-digit> 2 ）+ < span>天< / span>< / div>）
.append（ < div> + 此 .leadin gZeros（data.hours， 2 ）+ < span> hrs< / span>< / div>）
.append（ < div> + 此 .leadingZeros（data.min， 2 ）+ < span class =code-string> < span> min< / span>< / div>）
.append （ < div> + this .leadingZeros（data.sec， 2 ）+ < span> sec< / span>< / div>）
}
}）;
}）;
(this.el); el.empty() .append("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div>") .append("<div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div>") .append("<div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div>") .append("<div>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>") } }); });
这很容易。我不知道的是如何在每个表格行中包含多个实例，每个项目都有一个唯一的时间。
这是我当前的代码建造桌子。服务器语言是ColdFusion。数据由cfquery从服务中检索，然后在tbody内输出：
That''s easy. What I don''t know is how to include multiple instances of this inside of each table row with a unique time for each item.
Here is my current code for building the table. The server language is ColdFusion. The data is retrieved from the serve by a cfquery and then outputted inside the tbody:
<tbody>
<cfoutput query="MyQuery">
<tr>
<td>#MyQuery.ItemNum#</td>
<td>#MyQuery.HighBidNum#</td>
<!--- This parses the time format from the server --->
<cfif auctionclosenum GT 999>
<cfset cYear=Left(AuctionCloseNum, 4)>
<cfset cMonth=Right(Left(AuctionCloseNum, 6), 2)>
<cfset cDay=Right(Left(auctionclosenum, 8), 2)>
<cfset cSecond=Right(left(auctionclosenum, 14), 2)>
<cfset cMinute=Right(left(auctionclosenum, 12), 2)>
<cfset cHour=Right(left(auctionclosenum, 10), 2)>
<cfset Date="#cMonth#/#cDay#/#cYear#">
<cfset Time="#cHour#:#cMinute#:#cSecond#">
<cfset DateTime="#TimeFormat(Time, "h:mm tt")#<br>#DateFormat(Date , "ddd MMM D")#">
</cfif>
<!--- Here is where the countdown timer goes --->
<td>#DateTime#<div class="countdown-styled" style="width:200px;"></div></td>
<!---<div class="countdown-styled clearfix" style="width:200px;"></div>--->
<cfset cHighBid=DollarFormat(HighBid)>
<td>#cHighBid#</td>
</tr>
</cfoutput>
</tbody>
有人可以帮我吗？
Can anyone help me please?
这篇关于html表中的多个Jquery倒计时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
