表中每一行的计时器

Question

I would like to add a running time/ stopwatch for every row showing the time spent in each process. The timer just shows at the first row and nothing on the rest.

The date to be used would come from a database.

Here's a snippet of my code for reference:

<?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>

Hope you can help me out. Thank you in advance

Answer 1

You have no need for Timer as they are in the Java programming language. All you need to do is display the values from a database.

Assuming you have start and end times in tca_start and tca_end, and duration in tca_duration just add lines as

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

If that is not what you are looking for, maybe enhance you question.