Click a cell to edit how to create text in the cell

How to use JAVASCRIPT to implement the function of changing the text in a cell to editable INPUT or SELECT when the corresponding cell is clicked, and then the text in the cell is changed to the modified text after the cell is left.
The following method is used to change the click cell to INPUT. You do not know how to restore the text status after clicking another cell or how to return the modified value after the INPUT is returned. 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> <td> abc </td> <td> efg </td> </tr> </table>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
2,
<Table border = "1" cellpadding = "0" cellspacing = "0" id = "tbl"> <tr> <td> 123 </td> <td> 456 </ td> </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 it to execute]