Untitled
unknown
html
a year ago
1.8 kB
4
Indexable
Never
<!DOCTYPE html>
<html>
<head>
<title>Table Update Form</title>
</head>
<body>
<div id="table-container">
<table id="data-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<!-- Table data will be inserted here -->
</tbody>
</table>
</div>
<form id="input-form">
<label for="name">Name:</label>
<input type="text" id="name" required />
<label for="age">Age:</label>
<input type="number" id="age" required />
<label for="city">City:</label>
<input type="text" id="city" required />
<button type="submit">Add Entry</button>
</form>
<script>
const tableData = [];
const tableContainer = document.getElementById('table-container');
const dataTable = document.getElementById('data-table');
const inputForm = document.getElementById('input-form');
const nameInput = document.getElementById('name');
const ageInput = document.getElementById('age');
const cityInput = document.getElementById('city');
inputForm.addEventListener('submit', function (event) {
event.preventDefault();
const newName = nameInput.value;
const newAge = parseInt(ageInput.value);
const newCity = cityInput.value;
if (newName && !isNaN(newAge) && newCity) {
tableData.push({ name: newName, age: newAge, city: newCity });
updateTable();
inputForm.reset();
}
});
function updateTable() {
const tableBody = dataTable.querySelector('tbody');
tableBody.innerHTML = tableData
.map(
(data) => `
<tr>
<td>${data.name}</td>
<td>${data.age}</td>
<td>${data.city}</td>
</tr>
`
)
.join('');
}
</script>
</body>
</html>