CRUD-Operation-JS

This JavaScript code enables dynamic row management within an HTML table. Users can add, update, delete, and select multiple records through a form and button interactions.

---

Features Implemented

• Add individual or multiple records
• Edit individual or multiple selected records
• Delete individual or multiple selected records
• Select all or deselect all records using checkboxes

---

Table Structure

An additional <th> header "Action" is added dynamically to the <thead> of the table.

Action Buttons Added to <tfoot>:

• Delete All – Deletes all checked rows.
• Edit All – Edits all checked rows based on current form inputs.
• Add Multiple – Adds multiple records based on comma-separated input.
• Select All – Checks all checkboxes in the table.
• Deselect All – Unchecks all checkboxes in the table.

---

Adding a Record

On clicking #addRecord button:

• If form fields (appNumber, appSubject, and tags) are filled:
  • A new row is added to the table with the data.
  • Edit and Delete buttons are added per row.
  • A checkbox for multi-selection is included.
• If a row is being edited (via Edit button), it updates instead of adding.

---

Deleting a Record

Each row has its own Delete button:

<button class="btn-delete">Delete</button>