Making a clicked row editable

I'm creating the following table dynamically with an edit button on each line.

<tr>
<td><?php echo $f1; ?></td>
<td><?php echo $f2; ?></td>
<td><?php echo $f3; ?></td>
<td><?php echo $f4; ?></td>
<td><input class="edbuttons" type="button" value="Edit"></td>
</tr开发者_开发技巧>

When the edit button is clicked I'd like the cells in the row to be converted to text boxes, but I can't work out how to do it. I've spent hours searching the net for the right syntax, but can't find anything that does what I need.

The idea is that when edit is clicked the user can modify the data on the row and click a save or cancel button that would appear in place of the edit button.

I've added a class to the edit button to use as a selector, but I'm not sure if that's the most efficient method.

Any help gratefully received!

Jeditable is a good plugin for that.

You may also want to look at the new html5 contenteditable attribute. Setting it to true will allow you to edit the text inside.

http://html5demos.com/contenteditable

Put both the text and an input box with that text inside the table cell:

<td id="myText">
    <div>My text goes here</div>
    <input type="text" name="whatever" value="My text goes here" style="display:none;"/>
</td>

Then have your edit button toggle both of them:

//if you have jquery:
$('#myText div').toggle();
$('#myText input').toggle();

If you aren't using jquery, you can use javascript to change the display of each.

Obviously there are other little things to work out, but that's the general idea for a way to make it appear like you're making text turn into an input box.