javascriptjqueryhtmlcssjquery-countdown

Jquery Countdown - Hide Multiple TD


I'm working with JQUERY.COUNTDOWN - and I have a problem:

its possible to work with MULTIPLES INSTANCES and HIDE a TABLE ROW at end of countdown?

I had a Table, and each Row has a "Countdown" like this:

-----------------------------------------------
item 1     expires in 10:10:20s   [button: GO!]
-----------------------------------------------
item 2     expires in 12:20:33s   [button: GO!]
-----------------------------------------------
item 3     expires in 22:08:53s   [button: GO!]

Using:

HTML:
<div data-countdown="2016/01/01"></div>
<div data-countdown="2017/01/01"></div>
<div data-countdown="2018/01/01"></div> 

JS:
$('[data-countdown]').each(function() {
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event) {
$this.html(event.strftime('%D days %H:%M:%S'));

if (event.elapsed){
$(this).html('EXPIRED');};

});
});

I can control the "expires in XX:XX:XXs" and change the TXT to "EXPIRED" but I had a BUTTON "GO!" for each item - and this button will remain.

Then, I need to HIDE ALL ROW.

I work with the script and I can HIDE each Row with this:

 $("#Job3").countdown("2015/09/07 03:43:20", function(event) {
 var format = '%H:%M:%S';
 if(event.offset.days > 0) {
  format = '%-d day%!d ' + format;
      }
 if (event.offset.seconds > 0) { 
       $("#Panel").show();
       $("#NoJob").hide();
      }       
 $(this).text(event.strftime(format));
      if (event.elapsed){
       $(this).html('Expired');
       $("#TdJob3").hide();
      if (($('table#Panel tr:visible').length) == 1) { 
       $("#Panel").hide();
       $("#NoJob").show();
      }}
  });

#Panel - is the TABLE

#JobXX - is the countdown div

#TDJobXX - is the TD/ROW to hide

#NoJob - is an Alert message and appears only if ALL TD are hidden. (no job available)

The problem is that I will have thousands of Rows.. If I need to create a rule for each row will be a problem.

then I need a solution to work with MULTIPLE INSTANCES and HIDE each row at end of the countdown..

Any Idea?

I don't know Jquery/JS a lot...but I read all docs, and create the solution for "single countdown".. :D


Solution

  • You can jQuery's slideUp() to hide the rows , which has the timer expired.

    Since your target element for the timer is div with id Job1, which is inside the <tr>, you need to traverse upwards until the <tr> and call slideUp().like this to hide the complete row.

    JS CODE:

    $(this).closest('tr').slideUp();
    

    Ref: jQuery .slideUp()