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>