Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:
HTML
<div class="countdown-styled" style="width:200px;">


With this jquery code:
JavaScript
$(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>")
          }
        });
      });


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:
HTML
<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?
Posted

Hello Jordan,

Here is a small demonstration of how this can be done. I suggest that you assign an id to your table and then use each iterator to enable countdown for every time div in the table.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://keith-wood.name/js/jquery.countdown.js"></script>
<script>
var endDate = new Date(2013, 3, 14);
$(document).ready(function() {
    $('.countdown-styled', $('timerTable')).each(function() {
        $(this).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>")
            }
        });
    });
});
</script>
</head>
<body>
<table id="timerTable"> 
    <tbody>
        <tr>
            <td>Timer 1</td>
            <td><div class="countdown-styled" style="width:200px;"></div></td>
        </tr>
        <tr>
            <td>Timer 2</td>
            <td><div class="countdown-styled" style="width:200px;"></div></td>
        </tr>
        <tr>
            <td>Timer 3</td>
            <td><div class="countdown-styled" style="width:200px;"></div></td>
        </tr>
        <tr>
            <td>Timer 4</td>
            <td><div class="countdown-styled" style="width:200px;"></div></td>
        </tr>
    </tbody>
</table>
<br>
<div id="txtHint">Timers are rendered in above table...</div>
</body>
</html>

Regards,
 
Share this answer
 
v4
JavaScript
$(document).ready(function(){  
  $('tr[id]').each(function () {
     var $this = $(this);
	 var endDate = new Date();
     var count = $this.attr("id");
	 var year = parseInt(count.slice(0,4));
	 var month = parseInt(count.slice(4,6));
	 var day = parseInt(count.slice(6,8));
	 var hour = parseInt(count.slice(8,10));
	 var minute = parseInt(count.slice(10,12));
	 var second = parseInt(count.slice(12,14));
	 endDate.setFullYear(year, month - 1, day);
		endDate.setHours(hour+1);
		endDate.setMinutes(minute);
		endDate.setSeconds(second);
	 $this.find('.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>")
          }

        });
});
});
</script>


HTML
<body>
<table>  
  <tr id="20130425190000">
	<td><div class="countdown-styled" style="width:200px;"></div></td>
  </tr>
  <tr id="20130416190000">
	<td><div class="countdown-styled" style="width:200px;"></div></td>
  </tr>
  <tr id="20130424190000">
	<td><div class="countdown-styled" style="width:200px;"></div></td>
  </tr>
</table>
</body></body>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900