Oncick table in td transform the text into an input text and when clicking off change the value

Navigation
0

Hello, I wanted to know how I can do to change the value of a td as follows: 

<table class="tb">
<tr><td>Valor 1</td><td>Valor 2</td></tr>
<tr><td>Valor 3</td><td>Valor 4</td></tr>
</table>

If possible I wanted the solution in Jquery, without having to put IDs in all TD, besides this would be better if it had no invisible input (In case it would be better a javascript that works in all type of table).

The person clicks, transforms into a textfield, types the changed value and after clicking away changes the value.

Can you help me?

    
asked by anonymous 24.10.2015 / 11:48

1 answer

2

You can do this with contenteditable . That way you allow the HTML to be changed and you can re-read the html to know the new content. 

<table class="tb" contenteditable="true">
    <tr>
        <td>Valor 1</td>
        <td>Valor 2</td>
    </tr>
    <tr>
        <td>Valor 3</td>
        <td>Valor 4</td>
    </tr>
</table>

jsFiddle: link

    
24.10.2015 / 11:53
Show only selected checkboxes Why include html5.js file