htmlテーブルの各行のカウントダウンを追加します

Question

私は日付の列を含むHTMLテーブルを持っています。私は、日付列の1つに対してテーブルの各行のカウントダウンを実装したいと思います。ここで

は私の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>