我有一个包含多个列的网格&行。我想一次只编辑一个单元格。通过在用户悬停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专家能帮我解决这个问题，那就太好了。
简单但有效：jsFiddle
悬停时会显示一个带文本的跨度。你可以把它做成一个按钮或任何你喜欢的东西。此跨度充当编辑和保存按钮。
$('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);
});
正在工作jsFiddle。
我不是专家，但解决这个问题的最好方法是使用插件将整个表转换为网格，并提供许多选项，如单元格的版本。这是Jquery 最常用的10个网格列表
http://www.jquery4u.com/plugins/10-jquery-grids/
只需访问其中一个，即可查看文档或使用示例，如以下所示：http://trirand.com/blog/jqgrid/jqgrid.html
或者这个
http://flexigrid.info/