How can I do it so that when I double-clicked a cell in a table, the possibility of editing it was turned on and also in the reverse order.

I made a table, but I don’t know how to make it editable.

<table border="1"> <tbody> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr> </tbody> </table>

    1 answer 1

    For double clicking there is a dblclick event. And editing can be enabled through the attribute contenteditable :

     $('#my_table td').dblclick(function() { if( $(this).attr('contenteditable') !== undefined ){ $(this).removeAttr('contenteditable'); }else{ $(this).attr('contenteditable', ''); }; }); 
     #my_table td[contenteditable] {background-color: black; color: white;} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" id="my_table"> <tbody> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr> </tbody> </table>