Form Manipulation, Creating and Updating Table

Page Updated On: Nov. 11, 2025
Create a webpage with HTML, CSS, and JavaScript; you may use jQuery for DOM manipulation. The page must replicate the design shown above.

After the form is filled, clicking the Add button will insert the entered record into the table on the left. The table’s Action column will display Update and Remove links. Selecting Update will load that row’s data back into the form for editing. After the user modifies the values and clicks the Update button, the corresponding row in the table will be updated accordingly.

When the page loads, the table will be empty and the Update button will be disabled. When the user clicks the Update link in the Action column, the form’s Add button will be disabled. The Reset button will return the form to its initial state (as on page load) for adding new records, thereby re-enabling the Add button.

No page reload is required for any of these actions.