2

複数の列と行があるグリッドがあります。一度に1つのセルだけを編集したい。ユーザーが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

私は専門家ではありませんが、その問題を解決する最善の方法は、プラグインを使用して、セルのエディションなどの多くのオプションを備えたグリッドにテーブル全体を変換することです。これは、Jqueryで最もよく使用される10個のグリッドのリストです。

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

1つにアクセスして、次のようなドキュメントまたは使用例を参照してください：http: //trirand.com/blog/jqgrid/jqgrid.html

またはこれ

http://flexigrid.info/

于 2012-09-06T17:00:15.903 に答える