How do I make an editable HTML table with content taken from a database table and update the edits back in the database table all at once?

1

I want to make a web page which displays the contents of a table in my database. I want to make a few fields of the displayed content editable. Upon making the edits to multiple rows, I want to make an “update” button which when pressed, reflects all the changes made in the front-end, back in the database table.

For example, consider a student table in the database like:
|ID|Name|Marks1|Marks2|Marks3|

  • this table will first be shown on the web page with whatever records it holds
  • the user can edit Marks1 Marks2 and Marks3 columns
  • the user may edit any number of records
  • when user clicks “update”, the changes made will also reflect in the database table’s Marks1 Marks2 and Marks3 columns.

What I can’t wrap my head around is how I can make this editable table in the front-end that can bulk update records in the database table. I need to send the edited values via a post request to the back-end, where I can update the rows in database table. Once I get the values from this magical front-end, I can do something like

//pseudo-code
foreach(changed record from front-end table)
{
    fetch changed values
    make insert query
    update the database table
}

I just need to find a way to make the HTML page that does what I have described.

I tried to use editable cells in but I am not able to fetch those values and send them to the back-end for further processing. I don’t have an executable code yet, but I will be posting them in the coming updates to this question, after incorporating initial suggestions.

Can you suggest me how I can make this editable table?