Question

I have a table in my page as below.

<table id="tbl">
  <tr>
    <td class="field" id="field1s">field1x</td>
    <td class="field" id="field2s">field2x</td>
    <td class="field" id="field3s">field3x</td>
    <td class="field" id="field4s">field4x</td>
    <td class="xx">#</td>
    <td class="yy">#</td>
  </tr>
</table>

The texts of fields in row change into inputs on <td class="xx"> field and get updated on next click. This works fine. But I want the class xx change to aa and yy to bb when user first click <td class="xx">#</td>. Then the field may change to inputs, enabling user to change text. If user again click <td class="aa">#</td> (previously <td class="xx">#</td>), the text in row may be updated and if user click <td class="bb">#</td> (previously #), the row may go back to previous state. (Just like OK and CANCEL).

Here is the fiddle.

How can I do this? I prefer a simpler and faster solution.

Answer 1

If you’d like to keep your classes, try this fiddle.

I’ve used event delegation .live() to keep consistency with your class changes.

The .toggle should be removed to prevent some bugs – e.g. in thecodeparadox’s answer, if you click the edit button followed by cancel button, the next click in the edit button will fire the wrong function.

Just don’t forget to replace .live() by .on() if you’re using jQuery 1.7+ in your page.