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

我有一个包含多个列和行的网格。我想一次只编辑一个单元格。通过在用户将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>

1.
2.
3.
- |
废话1|
废话2

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

$（'td'）。单击（函数（）{
$('td').click(function(){
    var theText = $(this).text();
    $(this).html('<input type="text" value="'+theText+'"/>');
    $(this).find('input').focus();
});
$('td').hover(function(){
    $(this).css({'background' : 'url(http://www.earthclaim.com/images/edit_icon.gif) no-repeat right'});
}, function(){
    $(this).css('background', 'none');
});
$(document).on('blur', 'input', function(){
    var theText = $(this).val();
    $(this).parent().html(theText);    
});

var theText=$（this.text（）；
$（this.html（“”）；
$（this.find（'input'）.focus（）；
});
$（'td'）。悬停（函数（）{
$（this.css（{'background'：'url(http://www.earthclaim.com/images/edit_icon.gif)不重复（右“}）；
}，函数（）{
$（this.css（'background'，'none'）；
});
$（文档）.on（'blur'，'input'，function（）{
var theText=$（this.val（）；
$（this.parent（）.html（文本）；
});

​

---

我不是专家，但解决这个问题的最佳方法是使用插件将整个表格转换为网格，其中包含许多选项，如cell's edition。 下面列出了Jquery最常用的10个网格

只需访问其中一个，查看文档或使用示例，例如：

还是这个

简单但有效：

---

悬停时，它显示一个带有文本的范围。你可以把它做成按钮或任何你喜欢的东西。此范围充当“编辑和保存”按钮。

您需要投入更多精力。你试过什么？什么有效？什么不可以？使用jQuery仍在编写代码…到目前为止，您有三个可能的答案，如果您不同意这三个答案，请发布您自己的答案，或者如果您同意，那么必须让我们知道：）谢谢Rune，这很好，但我看到，一旦我填写新值，然后模糊文本框，它将保留文本框，我们如何隐藏文本框并保留新值。@JQueryNewbie使用

打开（“模糊”）

事件。我已经用blur事件更新了fiddle：我也有类似类型的问题，但在我的例子中，我必须从json数据中显示数据表，这已经完成了。问题是存在一个值为1或0的字段状态，根据该值，我必须显示一个单元格值，如check_图标和cross_图标。我正在使用基础DATABATABLE。JS，我通过完整的jQuery文件，编辑了一些我不想要但我不能理解的部分，在那里我可以检查jQuery、DATATABLE、M.JS中的字段值并分配受尊敬的图标。