1
Я создал пустую таблицу в HTML; Кроме того, я добавил кнопку, которая позволяет пользователю создавать столько пустых строк, сколько необходимо. Но для каждой новой записи я добавил счетчик минут, и он начинается с нуля для каждой новой записи. Моя проблема в том, что, пока он показывает счетчик, он не обновляется. Если я добавлю новую запись, она останется в 0 и никогда не будет обновляться. Я пробовал смотреть в setIntervals и setTimeout, но я не могу заставить его работать правильно. Может кто-нибудь помочь мне выяснить, что я делаю неправильно? Спасибо заранее!Мой таймер не обновляется
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<body>
<h1>Hello World</h1>
<table id="myTable" class="editableTable">
<caption><center>Hello World</center></caption>
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Time</th>
<th>Score</th>
</tr>
</thead>
<tbody id="tablebody">
<tr style="display:none" id="templaterow">
<td></td>
<td></td>
<td id="timer"></td>
<td></td>
</tr>
</tbody>
</table>
<div class="tablebuttons"> <button onclick="myCreateFunction()">Add</button></div>
</body>
</html>
CSS
html, body{
top:0;
bottom:0;
left:0;
right:0;
}
h1 {
text-align: center;
}
button {
text-align: center;
word-wrap: break-word;
font-weight: bold;
}
.buttons{
margin-left: auto;
margin-right: auto;
width: 600px;
}
* {
font-family:Consolas
}
.editableTable {
border:solid 1px;
width:100%;
}
.editableTable td {
border:solid 1px;
}
.editableTable .cellEditing {
padding: 0;
}
.editableTable .cellEditing input[type=text]{
width:100%;
border:0;
background-color:rgb(255,253,210);
}
Javascript
export function updateTime(seconds: number, minutes: number) {
$("#timer").last().html('{0}:{1}'.format(minutes, seconds));
seconds += 1;
if (seconds >= 60) {
seconds = 0;
minutes += 1;
}
if (minutes >= 60) {
minutes = 0;
}
setTimeout(updateTime, 1000, seconds, minutes);
};
$(document).ready(function() {
setTimeout(updateTime, 1000, 0,0);
});
export function myCreateFunction(): void {
var newInstance = <HTMLTableElement>document.getElementById("templaterow").cloneNode(true);
newInstance.style.display = "";
newInstance.id = null;
document.getElementById("tablebody").appendChild(newInstance);
}
Может быть, потому что вы несколько раз используют атрибут 'id'? Атрибуты 'id' предназначены для использования только один раз на странице, тогда как атрибуты' class' предназначены для нескольких экземпляров. – Quantastical