В настоящее время я работаю над своего рода веб-сайтом для отслеживания часов и использую форму и таблицу.
Сейчас у меня это работает, когда он добавляет содержимое формы в таблицу при первой отправке, но мне нужно, чтобы она позволяла вам вводить новую информацию в форму, и после отправки она автоматически добавляет новую строку с данные.
Пока у меня есть эта функция:
function enterText() {
var i = 1;
var table = document.getElementById("myTable");
var row = table.insertRow(i);
if (document.getElementById("td1").innerHTML == "") {
var x = document.getElementById("dt").value;
document.getElementById("td1").innerHTML = x;
} else {
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
i++;
}
var y = document.getElementById("hrs").value;
document.getElementById("td2").innerHTML = y;
var z = document.getElementById("dsc").value;
document.getElementById("td3").innerHTML = z;
}
Таким образом, конечная цель - в конечном итоге также не использовать стол, но я использую его в качестве заполнителя.
редактировать *
ответить на Freek Bes:
Имеет смысл поставить меня как глобальный. Я немного его протестировал и просто перемещаюсь, я не вижу разницы, он просто вводит форму в первую ячейку, а затем, когда снова нажимают на submit, добавляет пустую строку. Второй пример просто добавляет пустые ячейки. Проблема в том, что я не могу заставить его добавлять новый контент в новые ячейки.
Для лучшего контекста того, что я делаю, вот мой HTML:
<!DOCTYPE html>
<html>
<head>
<script src="hours.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<header>Hour Tracker</header>
<p>Created by: </p>
<body onload= enterText();>
<form onsubmit="return false" id="first" class="hours">
Date:<br>
<input type="date" name="date" id="dt"><br>
Hours:<br>
<input type="number" name="hours" id="hrs"><br>
Description:<br>
<input type="text" name="description" id="dsc"><br>
<br>
<input type="submit" value="submit" onclick="enterText();">
</form>
<table id="myTable">
<tr>
<th>Date</th>
<th>Hours</th>
<th>Description</th>
</tr>
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
</table>
</body>
</html>