Я пытаюсь создать страницу, которая создает строки таблицы, которые включают в себя текстовое поле , кнопку , которая загружает изображение и поле изображения.Он также включает в себя запуск и остановку для циклического перемещения по изображениям.
Теперь написанный мной код работает, кроме функции циклирования, и я уверен, что демонстрация может быть упрощена.Как вы думаете?
var count = -1
function addline() {
var table = document.getElementById("a");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1)
var cell3 = row.insertCell(2)
var temp = count;
cell1.innerHTML = "<input type='text'/>";
cell2.innerHTML = "<button>Load</button>";
cell2.setAttribute("onclick", "showpic(this)");
count++;
cell2.setAttribute("id", count);
}
function showpic(a) {
var table = document.getElementById("a");
var cell3 = table.rows[a.id].getElementsByTagName("td")[2]
cell3.innerHTML = "<img><img/>";
var link = table.rows[a.id].getElementsByTagName("td")[0].getElementsByTagName("input")[0].value;
cell3.getElementsByTagName("img")[0].setAttribute("src", link);
}
function slides() {
var i = 0;
myvar = setInterval(function() {
showpic(i);
i++
}, 1000);
}
function stopslides() {
clearInterval(myvar);
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Erg 11</title>
</head>
<body>
<button onclick="addline()">Add</button>
<button onclick="slides()">Start</button>
<button onclick="stopslides()">Stop</button>
<p>
<table border="1" id="a">
</table>
</p>
</body>
</html>