Question

我有一个有多个cols＆amp;行。我想一次只编辑一个单元格。通过在用户悬停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

在悬停时，它会显示带有文字的跨度。您可以将其设为按钮或任何您喜欢的按钮。此范围用作编辑和保存按钮。

Answer 2

$('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.

Answer 3

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

的列表

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

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

或者这个

http://flexigrid.info/

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

3 个答案: