Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: HTML jQuery table
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;">
 
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>")
          }
        });
      });
 
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?
Posted 12-Apr-13 9:48am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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.
<!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,
  Permalink  
v4
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

$(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>
 
<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>
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 365
1 Sergey Alexandrovich Kryukov 329
2 BillWoodruff 210
3 Afzaal Ahmad Zeeshan 204
4 CPallini 185
0 OriginalGriff 5,515
1 DamithSL 4,451
2 Maciej Los 3,902
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,175


Advertise | Privacy | Mobile
Web04 | 2.8.141216.1 | Last Updated 12 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100