Я использую таймер javascript, который можно запускать / завершать вручную, запускать и останавливать соответственно. Таймер работает нормально. Однако кажется, что таймер работает только для самой верхней записи в таблице.Кнопки в разных строках данных, ответ происходит только в самой верхней строке / записи. Я хочу, чтобы каждый счетчик был идентичен одной записи / строке. Вот код javascript.`
var status =0;
var time = 0;
function start() {
status = 1;
document.getElementById("startBtn").disabled = true;
timer();
}
function stop(numberPlate) {
status = 0;
var time = document.getElementById('timerLabel').innerHTML;
var car_no = numberPlate;
var stx = {no : time};
console.log(stx);
window.localStorage.setItem(car_no, time);
}
function reset() {
status = 0;
time = 0;
document.getElementById("startBtn").disabled = false;
document.getElementById("timerLabel").innerHTML = "00:00:00";
}
if (status == 1) {
setTimeout(function() {
time++;
var min = Math.floor(time/100/60);
var sec = Math.floor(time/100);
var mSec = time % 100;
if(min < 10) {
min = "0" + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = "0" + sec;
}
document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":"
+ mSec;
timer();
}, 10);
}
}
function output() {
document.getElementById('timerResult').innerHTML =
document.getElementById('timerLabel').innerHTML;
}`.
Код, считывающий данные из базы данных Mysql.
`<div class="table">
<table>
<thead>
<tr>
<th>Vehicle name</th>
<th>Vehicle make</th>
<th>Vehicle color</th>
<th>Reg Number</th>
<th>Date</th>
<th>Time</th>
<th>Countdown</th>
<th colspan="4">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['Vehicle_name']; ?></td>
<td><?php echo $row['Vehicle_make']; ?></td>
<td><?php echo $row['Vehicle_color']; ?></td>
<td><?php echo $row['Number_plate']; ?></td>
<td><?php echo $row['Date']; ?></td>
<td><?php echo $row['Time']; ?></td>
<td><body>
<div class="container">
<div id="timerLabel">00:00:00</div>
<input type="button" value="Start" class="myButton" onclick="start()"
id="startBtn">
<input type="button" value="Stop" class="myButton" onclick="stop('<?=
$row['Number_plate']; ?>')">
<h1 id="timerResult"></h1>
</div>
<script src="timer2.js">
</script>
</body></td>
<td>
<a href="php_code.php?del=<?php echo $row['Number_plate']; ?>"
class="del_btn">Delete</a>
</td>
</tr>
<?php } ?>
</table>
</div>`.
В браузере таблица выглядит следующим образом. 