My latest research involved the generation of a web table from a MySql/MariaDB database, with live CRUD capability (Create, Read, Update, Delete).
Key Learnings: JQuery is your friend. Bootstrap is also your friend. W3Schools is your friend. StackOverflow is your friend. Github is your friend.
With the help of all the above mentioned resources I was able to take a database of information, list it in a web page and then have options to delete records, update records, and add records. The biggest headache came with the question of how to signal a change to existing information in the listed table. An example I found on Github used the .on(blur…) functionality of JQuery but it had a bug(?) associated with it when the blur event fired multiple (an infinite number?) times. I solved the problem unsatisfactorily by changing .on(‘blur’,…) to .on(‘dblclick’…). I wanted to try avoiding mouse operations, but for now this has fixed the issue.
Update: April 1, 2023 (and this is not an April Fool)
The latest version of JQuery appears to have fixed this issue. The ‘dblclick’ references were changed to ‘blur’ references and the page appears to be working as intended.
This example on Github was particularly helpful:
https://github.com/rahmat058/Live-Table-Add-Edit-Delete-using-Ajax-Jquery-in-PHP-Mysql