Вывод данных из разных форм в таблицу

Когда нам необходимо собрать данные из разных форм на веб-странице в одну таблицу, это может стать сложной задачей. Но не беспокойтесь, мы подготовили для вас полезную инструкцию, которая поможет вам справиться с этой задачей одним движением.

Первым шагом является создание HTML-формы с необходимыми полями. В зависимости от ваших требований, вы можете добавить любое количество полей, таких как имя, фамилия, адрес и т. д. Помните, что каждое поле должно иметь уникальное имя, чтобы вы могли обратиться к нему позже.

Пример кода:

<form>
<input type="text" name="name" placeholder="Имя">
<input type="text" name="surname" placeholder="Фамилия">
<input type="text" name="address" placeholder="Адрес">
<button type="button" onclick="addDataToTable()">Добавить данные</button>
</form>

После того, как вы создали форму, добавьте JavaScript-функцию, которая будет выполняться при нажатии на кнопку «Добавить данные». Эта функция будет собирать данные из полей формы и добавлять их в таблицу.

Пример кода:

<script>
function addDataToTable() {
var name = document.getElementsByName('name')[0].value;
var surname = document.getElementsByName('surname')[0].value;
var address = document.getElementsByName('address')[0].value;
var table = document.getElementById('data-table');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = name;
cell2.innerHTML = surname;
cell3.innerHTML = address;
}
</script>

Наконец, создайте таблицу с заголовками столбцов и уникальным идентификатором. В этой таблице будут отображаться данные, введенные в форму. Убедитесь, что вы добавили «id» к таблице, чтобы JavaScript мог найти ее и добавить данные.

Пример кода:

<table id="data-table">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Адрес</th>
</tr>
</table>

Теперь, когда все готово, каждый раз, когда пользователь вводит данные и нажимает кнопку «Добавить данные», эти данные будут автоматически добавляться в таблицу. Таким образом, вы сможете легко отслеживать и анализировать введенную информацию.