如何根据给定日期将不同的计时器添加为引导程序数据表行中的列？

Question

因此，我试图在获取截止日期值的表上添加一个倒数计时器，并添加一个显示剩余时间的单元格。目前，它适用于一条记录，但在添加两行或多行时，我得到了最后一行计时器的副本，复制了所有记录的计时器单元<div class="card mb-3">  <div class="card-header">    <i class="fa fa-table"></i> ^{<span class="badge badge-warning"> {{ new}} New</span>}New Orders From Clients  </div>  <div class="card-body">    <div class="table-responsive">      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">        <thead>          <td>Reference Code</td>          <td>Title</td>          <td>Number of Pages</td>          <td>Take this Task</td>          <td>Due Date</td>          <td>Remaining Time</td>        </thead>        {% for t in order %}        <tbody>          <tr>            <td>              <a href="{% url 'view_order' pk=t.pk %}">{{ t.urlhash }}</a>            </td>            <td>{{ t.title }}</td>            <td>{{ t.Number_of_pages }}</td>            <td>              {% if t.status == False %}              <a href="{% url 'claim' pk=t.pk %}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">Take order</a>{% else %}              <span>&#10004; Taken</span> {% endif %}            </td>            <td>{{ t.due_date }} </td>            <td id="time" class="text-warning"></td>          </tr>          <script>            // Set the date we're counting down to            var countDownDate = new Date("{{ t.due_date.isoformat }}").getTime();            // console.log(dex);            //var countDownDate = new Date("July 18, 2020 19:27:25").getTime();            // Update the count down every 1 second            var x = setInterval(function() {

Answer 1

这不是真正的 DataTables 问题，但它很有趣，所以这就是我的工作：

(() => {

  setInterval(() => {

    const table = document.getElementById("dataTable")

    for (var i = 0, row; row = table.rows[i]; i++) {

      const dueDate = row.querySelector('.due-date')

      if (dueDate) {

        const dateBits = dueDate.innerHTML.split('/')

        const dateDue = new Date(dateBits[2], dateBits[1], dateBits[0]).getTime()

        const now = new Date().getTime()

        const distance = dateDue - now

        const countDownDate = row.querySelector('.text-warning')

        if (distance < 0) {

          countDownDate.innerHTML = 'EXPIRED'

        } else {

          const days = Math.floor(distance / (1000 * 60 * 60 * 24));

          const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

          const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

          const seconds = Math.floor((distance % (1000 * 60)) / 1000);

          countDownDate.innerHTML = `Remaining time ${days} Days ${hours} hours ${minutes} minutes ${seconds}s`

        }

      }

    }

  }, 1000)

})()

我们在这里所做的是每秒抓取表格，遍历表格行并检查是否有适当的单元格称为due-date。如果存在，那么我们检查距离，如果它是负数，那么我们将具有类的单元格设置text-warning为EXPIRED否则，我们添加适当的消息。我希望这有帮助吗？在这里工作 JSFiddle 。