Javascript Jquery倒计时-隐藏多个TD

我正在和一位同事一起工作，我有一个问题：

可以使用多个实例并在倒计时结束时隐藏一个表行吗

我有一张桌子，每一行都有这样的“倒计时”：

-----------------------------------------------
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!]

使用：

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');};

});
});

#面板-是桌子吗

#JobXX-是倒计时div

#TDJobXX-是要隐藏的TD/行

#NoJob-是一条警告消息，仅当所有TD都隐藏时才会出现。（没有工作）

问题是我将有数千行。。如果我需要为每一行创建一个规则，这将是一个问题

然后我需要一个解决方案来处理多个实例，并在倒计时结束时隐藏每一行

有什么想法吗

---

我不太了解Jquery/JS……但我阅读了所有文档，并创建了“单倒计时”解决方案D

您可以使用jQuery的

slideUp（）

隐藏计时器已过期的行

由于计时器的目标元素是id为

Job1

的div，它位于

中，因此需要向上遍历直到

并调用

slideUp（）

。这样可以隐藏整行

JS代码：

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

---

Ref:

在各自的计时器运行后，您可以

slideUp（）

行，如

if（event.appeated）{$（this.slideUp（）；}

。你真的不需要那些复杂的逻辑——你现在所拥有的——在计时器结束后隐藏单独的行！谢谢你的帮助！正如你所说，我滑了一下，但只有“倒计时”是滑的。。行保留..表结构如下：第1项是“倒计时”div。。当我播放幻灯片-倒计时幻灯片时，只有这个-而不是行。。我不知道我怎么能“打电话”嗨@dreamweiver！谢谢你的帮助！你好@dreamweiver！对在你昨天的评论之后，我用我的大脑思考。。。我读了很多关于。。。然后我发现了同样的解决方案。它的作品！但是，我不能使用slideUp（）或任何其他效果（我也尝试了淡入淡出）。slideUp（）和fade（）将整行“删除”。但由于某些原因，该行被删除（ok），但不是“正式隐藏”行。然后，当我有零行（只有标题行）时，我隐藏表并显示一个Div，其中包含一条关于（“不再有作业可用”）的消息。但是使用SLIDEUP（）或FADE（）-行被删除（确定）-但是当我使用$（'Table#Panel tr:visible'）计算行数时。结果仍然与所有行一样长。屏幕上不再显示行。。仅标题行。。如果我尝试$（'table#Panel tr'）.length，也会发生同样的情况。。然后。。为了更好地工作，我使用：$（this.closest（'tr'）.hide（）-或$（this.closest（'tr'）.remove（）。如何使用Slideup或Fade？我做错了什么？这个解决方案很好，但效果会很好。有什么想法吗？太多了！！Daniel当您调用

slideUp（）

时，它只会隐藏行，而不会将其完全删除，因此，如果您希望显示消息，如

不再显示作业，则需要检查行的可见性，具体取决于这样的显示消息。在jsfiddle.Hi@dreamweiver上检查这个简单的原型！首先，非常感谢你的帮助和时间！我真的很高兴。为创建这个原型做了很多工作！我在我的脚本中使用了相同的逻辑-但由于某些原因，它不起作用。。。如果（$（'#jobPortal tr:visible'）.length==0）>在我的例子中，如果（$（'#jobPortal tr:visible'）.length==1），因为我有一个头tr。如果我放置了一个“效果”，如slideUp或fadeOut，脚本将失败。。但是使用Hide（）或Remove（）-效果很好。（我可以隐藏表格并显示警报消息）
$(this).closest('tr').slideUp();