表中每一行的計時器

Question

我想為每一行添加一個運行時間/秒表，顯示每個進程所花費的時間。 計時器只顯示在第一行，其余沒有。

要使用的日期將來自數據庫。

這是我的代碼片段供參考：

<?php
  
  echo "<h2>On-Going Repairs</h2>";

  $query = "SELECT tca_ro, tca_csplate, tca_name, tca_start, tca_process FROM tcs.tca_bp_process WHERE date(tca_start) = curdate() AND tca_status = 'Started'";

  if($query_result = mysqli_query($link,$query)){

    if(mysqli_num_rows($query_result) > 0)
    {
        echo "<div class='card-body'>";
            echo "<div class='table-responsive'>";
                echo "<table class='table table-bordered' id='dataTable' width='100%' cellspacing='0'>";
                    echo "<thead>";
                        echo "<tr>";
                            echo "<th>RO NUMBER</th>";
                            echo "<th>CS NUMBER</th>";
                            echo "<th>TECHNICIAN</th>";
                            echo "<th>START</th>";
                            echo "<th>PROCESS</th>";
                            echo "<th>DURATION</th>";
                        echo "</tr>";
                    echo "</thead>";

                    echo "<tbody>";

                    while ($row = mysqli_fetch_array($query_result))
                    {
                        echo "<tr>";
                            echo "<td>".$row['tca_ro']."</td>"; 
                            echo "<td>".$row['tca_csplate']."</td>";
                            echo "<td>".$row['tca_name']."</td>";
                            echo "<td><input type='text' id='date' value='".$row['tca_start']."'</td>";
                            echo "<td>".$row['tca_process']."</td>";
                            echo"<td><div id='data'></div></td>";
                        echo "</tr>";
                    }                                    
                    echo "</tbody>";
                echo "</table>";
              echo "</div>";
        echo "</div>";
    } 
  }
?

  <script type="text/javascript">
    function func(){

      var dateValue = document.getElementById("date").value;
      var date = Math.abs(new Date(dateValue).getTime() / 1000).toFixed(0);
      var currentDate = Math.abs((new Date().getTime() / 1000).toFixed(0));
      var diff = currentDate - date;

      var hours = Math.floor(diff/3600) % 24;
      var minutes = Math.floor(diff/60) % 60;
      var seconds = diff % 60;

      var time_str = hours + " : " + minutes +" : "+ seconds

      document.getElementById("data").innerHTML =hours+":"+minutes+":"+seconds;
    }

    func();
    setInterval(func, 1000);
  </script>

希望你能幫助我。 先感謝您

Answer 1

您不需要 Timer，因為它們在 Java 編程語言中。 您需要做的就是顯示數據庫中的值。

假設您在 tca_start 和 tca_end 中有開始和結束時間，並且在 tca_duration 中有持續時間，只需將行添加為

echo "<td>".$row['tca_start']."</td>";
echo "<td>".$row['tca_end']."</td>";
echo "<td>".$row['tca_duration']."</td>";

如果那不是您要尋找的，也許可以增強您的問題。