jquery - 使用悬停上方显示的编辑图标编辑表格数据单元格

Question

我有一个包含多个列和行的网格。我想一次只编辑一个单元格。通过在用户将鼠标悬停在 td 上时显示编辑图标，我希望用户能够单击编辑图标，然后 td 变得可编辑。 onblur 将保留新值，并且当 td 未聚焦时，编辑图标也会隐藏。

我无法为此编写代码，我想应用 JQuery 技术。

<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>

如果 JQuery 专家能帮助我解决这个问题，那就太好了。

Answer 1

简单但有效:jsFiddle

悬停时，它会显示带有文本的范围。您可以将其设为按钮或任何您喜欢的东西。该跨度充当编辑和保存按钮。