2

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

4

3 回答 3

2

简单但有效：jsFiddle

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

于 2012-09-06T17:02:30.520 回答
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);    
});

工作 jsFiddle。

于 2012-09-06T16:59:41.850 回答
0

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

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

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

或这个

http://flexigrid.info/

于 2012-09-06T17:00:15.903 回答