Making an HTML table editable

Tetr0X -  
 mcs35 -
Hello,
Configuration: Windows / Opera Next 65.0.3467.78

I would like to make my table editable/modifiable, for example to double-click on a cell and be able to edit it. Here is my HTML table
 <table class="table"> <caption>test</caption> <tr> <th>Name</th> <th>First Name</th> <th>Building</th> <th>Phone</th> </tr> <tr> <td><a href="Tableau.html">test</a></td> <td></td> <td>Lyon</td> <td>0600000000</td> </tr> <tr> <td><a href="Tableau.html">test</a></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>to change</td> <td> </td> <td> </td> <td> </td> </tr> </table> 

Thank you for your response

Tetr0X

3 réponses

AlainPre
 
All HTML elements can now be editable. Just add the contenteditable attribute to the table cells.


<td contenteditable="true"> Initial content </td>
1
mcs35
 
And how do we save the data once modified?
With a lot of server-side code.
0
Domingo55 Posted messages 194 Status Membre 47
 
Hello

You can use the Bootstrap library :)

https://mdbootstrap.com/docs/jquery/tables/editable/

See you later!

--
Give a man a fish he eats for a day, teach a man to fish he eats for a lifetime... ;)
0
Tetr0X
 
Thank you :)
0
Torton
 
Hello
HTML is the description of the page's content.
For pages to be dynamic (the content displayed by the site can change), a database is needed "to feed it".
We talk about static sites if the page is written with HTML only (+CSS, JavaScript...) because the content cannot change without having to rewrite the file (manually) of the page.

Whether in a table or otherwise is a rather negligible detail:

-----------------------------------------------------------------------------------------------------------------------------------------------
Static page (client-side only):
the user requests the page which is sent (HTTP)
The browser loads the site's files (HTML page, images...) and displays them
------------------------------------------------------------------------------------------------------------------------------------------------
Dynamic page (sent to the client):

the user requests the page
A server program (for example PHP) loads the data from the database and provides it to the page
The HTML page is then created and sent to be displayed

and in the other direction (sending to the database)

the user sends information (HTML form) to the server program (PHP for example)
The server program sends it to the database (and can process it) which records it.

The page loaded again will thus have the updates made by the form saved in the database.
------------------------------------------------------------------------------------------------------------------------------------------------------
It is this principle that allows a forum to function, for example:
There is not the site's creator who has to write the new HTML page and its contents but a part that is "dynamic" because it fetches its content from the database.
Programming indeed allows for the automation of a process and indicates how many messages there are on the forum; the program will use the same HTML and CSS layout but "serialized" (repeated regions) depending on whether there is one, ten, or a thousand messages.

There you go, I hope you understood my explanations.

When a web page is displayed, it is from a source file on the hosting server that is sent by HTTP over the network to the user's computer (downloading).
It is therefore "static" and can only be modified by intervening on the file on the server by modifying it manually.

If we want to allow the display of content that changes or varies over time, we need to go through other principles in addition to the HTML page, such as a database and a server language that connects the page on the client side to the database.

https://fr.wikipedia.org/wiki/Architecture_trois_tiers

https://www.commentcamarche.net/contents/784-php-bases-de-donnees
0