为html表中的每一行添加倒计时

Question

我有一个包含日期列的HTML表。我想针对日期列中的某一列实施表中每一行的倒计时。

这里去我的HTML代码：

<table style="width: 100%" id="bidsTable"> 
       <thead> 
        <tr> 
         <th>Title</th> 
         <th >Amount</th> 

         <th >Start Date</th> 
         <th >Bids</th> 
         <th >End Date</th> 
         <th ></th> 
        </tr> 
       </thead> 
       <tbody> 
         <tr> 
          <td >Peugeot 406 car fro sale</td> 
          <td >800000.00</td> 

          <td >2017-04-10 3:48:47 PM</td> 
          <td >1</td> 
          <td >2017-05-10 3:48:47 PM</td> 
          <td ></td> 
         </tr> 
         <tr> 
          <td >House for sale in Kubwa</td> 
          <td >4000000.00</td> 

          <td >2017-04-10 3:48:47 PM</td> 
          <td >0</td> 
          <td >2017-06-10 3:48:47 PM</td> 
          <td ></td> 
         </tr> 
         <tr> 
          <td >Five hectare farming land for lease</td> 
          <td >3000000.00</td> 

          <td >2017-04-10 3:48:47 PM</td> 
          <td >0</td> 
          <td >2017-07-10 3:48:47 PM</td> 
          <td ></td> 
         </tr> 



       </tbody> 
      </table> 

而且这里去我的javascript代码

<script> 
var table = document.getElementById("bidsTable"); 
for (var i = 1, row; row = table.rows[i]; i++) { 
    //iterate through rows 
    //rows would be accessed using the "row" variable assigned in the for loop 

    var endDate = row.cells[4]; 
    countDownDate = new Date(endDate.innerHTML.replace(/-/g, "/")).getTime(); 
    var countDown = row.cells[5]; 
    // Update the count down every 1 second 

    var x = setInterval(
    function() { 
     // Get todays date and time 
     var now = new Date().getTime(); 

     // Find the distance between now an the count down date 
     var distance = countDownDate - now; 

     // Time calculations for days, hours, minutes and seconds 
     var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
     var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
     var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
     var seconds = Math.floor((distance % (1000 * 60))/1000); 


     // Display the result in the element 
     countDown.innerHTML = (days + "d " + hours + "h " 
      + minutes + "m " + seconds + "s "); 

     //If the count down is finished, write some text 
     if (distance < 0) { 
      clearInterval(x); 
      countDown.innerHTML = "Bid closed"; 
     } 
    }, 1000); 
} 
</script> 

定时器的作品，但只填充最后排为表的最后一行倒计时。

我检查，但无法弄清楚，为什么它不填充以前行。

任何帮助将不胜感激。

Answer 1

我只需要在循环内运行setInterval函数中的循环，而不是setInterval函数。

<script> 

var table = document.getElementById("bidsTable"); 

var x = setInterval(
    function() { 

     for (var i = 1, row; row = table.rows[i]; i++) { 
      //iterate through rows 
      //rows would be accessed using the "row" variable assigned in the for loop 

      var endDate = row.cells[4]; 
      countDownDate = new Date(endDate.innerHTML.replace(/-/g, "/")).getTime(); 
      var countDown = row.cells[5]; 
      // Update the count down every 1 second 

      // Get todays date and time 
      var now = new Date().getTime(); 

      // Find the distance between now an the count down date 
      var distance = countDownDate - now; 

      // Time calculations for days, hours, minutes and seconds 
      var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
      var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
      var seconds = Math.floor((distance % (1000 * 60))/1000); 


      // Display the result in the element 
      countDown.innerHTML = (days + "d " + hours + "h " 
       + minutes + "m " + seconds + "s "); 

      //If the count down is finished, write some text 
      if (distance < 0) { 
       clearInterval(x); 
       countDown.innerHTML = "Bid Closed"; 
      } 
     } 
    }, 1000); 
</script>