使用悬停时显示的编辑图标编辑表格数据单元格答案

【问题标题】：Edit table data cell using a edit icon shown over hover使用悬停时显示的编辑图标编辑表格数据单元格
【发布时间】：2012-08-31 13:06:03
【问题描述】：

我有一个包含多个列和行的网格。我想一次只编辑一个单元格。通过在用户悬停 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 专家能帮我解决这个问题，那就太好了。

【问题讨论】：

您将不得不付出更多努力。您尝试过什么？什么有效？什么没有？用jQuery还在写代码……
现在你有三个可能的答案，如果你不同意这三个，请发表你自己的，或者如果你同意，必须让我们知道:)

标签： jquery html-table cell edit tablerow

【解决方案1】：

$('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);    
});

Working jsFiddle.

【讨论】：

【解决方案2】：

我不是专家，但解决该问题的最佳方法是使用插件将整个表格转换为具有许多选项（例如单元格版本）的网格。这是一个包含 10 个最常用 Jquery 网格的列表

http://www.jquery4u.com/plugins/10-jquery-grids/

只需访问一个并查看文档或使用示例，例如： http://trirand.com/blog/jqgrid/jqgrid.html

或者这个

http://flexigrid.info/

【讨论】：

【解决方案3】：

简单但有效：jsFiddle

悬停时会显示一个带文本的跨度。你可以把它做成一个按钮或任何你喜欢的东西。这个 span 充当编辑和保存按钮。

【讨论】：

谢谢Rune，这很好用，但是我看到一旦我填写新值然后模糊出文本框就会保留文本框，我们怎样才能隐藏文本框并保留新的价值。
@JQueryNewbie 使用on("blur"..) 事件。我用模糊事件更新了小提琴：fiddle
我也有类似的问题，但在我的情况下，我必须显示来自 json 数据的数据表，这已经完成。问题是有一个值为 1 或 0 的字段状态，基于此值，我必须将单元格值显示为 check_icon 和 cross_icon。我正在使用基础 dataTable.js，我浏览了完整的 jquery 文件并编辑了一些我不想要但我无法理解的部分，我可以在其中检查 jquery.dataTable.min.js 中的字段值并分配受尊重的图标。跨度>