数据表每一行的倒计时

Posted 2023-05-07

【中文标题】数据表每一行的倒计时

【英文标题】：Countdown timer in each row of datatable

【发布时间】：2019-04-10 11:30:46

【问题描述】：

是否可以使用 js 、 html 和 jquery 为数据表的每一行设置一个倒数计时器？我目前能够执行倒数计时器，但不确定如何将此倒数计时器分配给数据表的所有行。从数据表下面的代码中可以看出，倒数计时器只能在第一行看到，因为 id 只能分配一次。我需要找到分配多个ID的方法吗？有什么建议吗？

        for (var i = 0; i < arr.length; i++) 
        t.row.add([

         "<b>" + arr[i].eventname +"</b>" + "</br>" +"</br>",
         "<b>" + arr[i].datetime + "</b>",
         arr[i].venue,
         "<a href='#' class='btn btn-primary btn-rounded' id='btn" + 
          arr[i].eventid + "'>View</a>",
          // for countdown timer
           "<div id = 'day' ></div>:<div id = 'hour'></div>:<div id = 'min'> 
          </div>:<div id = 'sec'></div></div>"

        ]).draw(false);

【参考方案1】：

Yo 可以按类而不是 id 分配计时器的数字（使用 .day、.hour、.min、.sec，而不是 #day、#hour 等）

for (var i = 0; i < arr.length; i++) 
  t.row.add([

    "<b>" + arr[i].eventname +"</b>" + "</br>" +"</br>",
    "<b>" + arr[i].datetime + "</b>",
    arr[i].venue,
    "<a href='#' class='btn btn-primary btn-rounded' id='btn" + 
    arr[i].eventid + "'>View</a>",
    // for countdown timer
    "<div class = 'day' id = 'day" + arr[i].eventid + "' ></div>:<div class = 'hour' id = 'hour" + arr[i].eventid + "'></div>:<div class = 'min' id = 'min" + arr[i].eventid + "'> 
    </div>:<div class = 'sec' id = 'sec" + arr[i].eventid + "'></div></div>"

  ]).draw(false);