Oncick table in the <td> turn the text into an input text and when click out change the value

Asked

Viewed 536 times

0

Hello, I was wondering 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, enters the changed value and after clicking out changes the value.

What I want is just to make this basic functionality work.

javascript jquery html

1 answer

2


You can do that with contenteditable. This 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: http://jsfiddle.net/eppLwzme/

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.