Search code examples
jqueryhtml-tablecelledittablerow

Edit table data cell using a edit icon shown over hover

I have a grid with multiple cols & rows. I want edit just one cell at a time. By showing a edit icon when the user hovers the td, I want the user to be able to click the edit icon and then the td becomes editable. onblur will retain the new value and the edit icon is also hidden when the td is not in focus.

I am not able to write the code for this, I want to apply JQuery techniques.

<table>
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
</thead>
<tbody>
  <tr id="r1">
    <td>- |</td>
    <td>blah 1 |</td>
    <td>blah 2 <div class="editit" style="background:url(pencil.png) no-repeat"></div></td>
  </tr>

It will be great if the JQuery experts help me solve this issue.

Solution

  • Simple but effective: jsFiddle

    On hover it shows a span with text. You can make this a button or whatever you like. This span acts as edit and save button.