How to make the text in the cell editable after clicking on the cell_javascript skills

How to use JAVASCRIPT to realize that when the corresponding cell is clicked, the text in the cell becomes editable INPUT or SELECT, and after leaving the cell, the text in the cell becomes the modified text.
I use the following method to turn a clicked cell into INPUT, but I don’t know how to restore the text state after clicking on other cells and how to return the value modified after INPUT. Is there a better way to achieve this effect.

<table border="1" cellpadding="0" cellspacing="0" id="tbl"> <tr> <td>123</td> <td>456</td> </tr> <tr> <td>abc</td> <td>efg</td> </tr> </table>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

2,

<table border="1" cellpadding="0" cellspacing="0" id="tbl"> <tr> <td>123</td> <td>456</td> </tr> <tr> <td>abc</td> <td>efg</td> </tr> </table>
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute
]