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

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 问题，但它很有趣，所以这就是我的工作：(() => {&nbsp; setInterval(() => {&nbsp; &nbsp; const table = document.getElementById("dataTable")&nbsp; &nbsp; for (var i = 0, row; row = table.rows[i]; i++) {&nbsp; &nbsp; &nbsp; const dueDate = row.querySelector('.due-date')&nbsp; &nbsp; &nbsp; if (dueDate) {&nbsp; &nbsp; &nbsp; &nbsp; const dateBits = dueDate.innerHTML.split('/')&nbsp; &nbsp; &nbsp; &nbsp; const dateDue = new Date(dateBits[2], dateBits[1], dateBits[0]).getTime()&nbsp; &nbsp; &nbsp; &nbsp; const now = new Date().getTime()&nbsp; &nbsp; &nbsp; &nbsp; const distance = dateDue - now&nbsp; &nbsp; &nbsp; &nbsp; const countDownDate = row.querySelector('.text-warning')&nbsp; &nbsp; &nbsp; &nbsp; if (distance < 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; countDownDate.innerHTML = 'EXPIRED'&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const days = Math.floor(distance / (1000 * 60 * 60 * 24));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const seconds = Math.floor((distance % (1000 * 60)) / 1000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; countDownDate.innerHTML = `Remaining time ${days} Days ${hours} hours ${minutes} minutes ${seconds}s`&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }, 1000)})()我们在这里所做的是每秒抓取表格，遍历表格行并检查是否有适当的单元格称为due-date。如果存在，那么我们检查距离，如果它是负数，那么我们将具有类的单元格设置text-warning为EXPIRED否则，我们添加适当的消息。我希望这有帮助吗？在这里工作 JSFiddle 。