4

以下のように私のページにテーブルがあります。

<table id="tbl">
  <tr>
    <td class="field" id="field1s">field1x</td>
    <td class="field" id="field2s">field2x</td>
    <td class="field" id="field3s">field3x</td>
    <td class="field" id="field4s">field4x</td>
    <td class="xx">#</td>
    <td class="yy">#</td>
  </tr>
</table>

行のフィールドのテキストは、フィールドの入力に変更さ<td class="xx">れ、次のクリックで更新されます。これはうまくいきます。しかし、ユーザーが最初にクリックしたときにクラスxxを変更したいと思いaaます。次に、フィールドが入力に変わり、ユーザーがテキストを変更できるようになります。ユーザーが再度クリックすると(以前は)、行のテキストが更新され、ユーザーが(以前は #) をクリックすると、行は前の状態に戻る可能性があります。(OK と CANCEL のように)。yybb<td class="xx">#</td><td class="aa">#</td><td class="xx">#</td><td class="bb">#</td>

これがフィドルです。

これどうやってするの？私は、よりシンプルで高速なソリューションを好みます。

4

2 に答える 2

1

jQuery.data()を使えば簡単に解決できます。クラス替えは必要ないと思います。

   $('#tbl .xx').toggle(
      function() {
        $(this).siblings('.field').each(function(){
          var t = $(this).text();
          $(this).data('prev', t);
          $(this).html($('<input />',{'value' : t}));
        });
      },
      function() {
        $(this).siblings().each(function(){
          var inp = $(this).find('input');
          if (inp.length){
            $(this).text(inp.val());
          }
        });
      }    
    );


    $('#tbl .yy').click(function() {
      $(this).siblings('.field').each(function(){
            $(this).text($(this).data('prev'));
       });
    });

デモ

于 2012-06-03T07:27:19.570 に答える
0

クラスを維持したい場合は、この fiddleを試してください。

.live()クラスの変更との一貫性を保つために、イベント委任を使用しました。

いくつかのバグを防ぐために削除する必要があります。.toggleたとえば、thecodeparadox の回答で、編集ボタンをクリックしてからキャンセル ボタンをクリックすると、編集ボタンを次にクリックすると、間違った機能が起動します。

ページで jQuery 1.7 以降を使用している場合は、忘れずに.live()byに置き換え.on()てください。

于 2012-06-03T08:31:24.540 に答える