1

セルの内容をクリックしたときに選択メニューに置き換えたい行がたくさんあるテーブルがあります。私は次のようなことを考えています：

http://jsfiddle.net/dRZmQ/1/

 $("#my-table tbody").on("click", "td.edit", function(){
    var $t=$(this),role=$t.text();
    $t.html($("#select-clone").clone(false).removeAttr('id'));
 }).on("change", "td.edit", function(){
    alert('change');
 }).on("blur", "td.edit", function(){
    alert('blur');
 });

上記のコードはほぼ機能しますが、何らかの理由で、マウスボタンを押さないと選択メニューが閉じます。

ここで、選択メニューがフォーカスを失ったときに、選択メニューを元のテキストに置き換えるイベントをトリガーしたいと思います。私はblur（）で遊んでいますが、動作していません。そして、選択メニューが変更されたときに、データを保存して、選択メニューを選択されたオプションに再度置き換えることができるイベントをトリガーしたいと思います。

4

1 に答える 1

1

1）

最初の問題を解決するには、イベントselectを使用して要素にを追加していることを覚えておく必要があります。clickしたがって、にいるたびclickに、selectにトリガーclickされ.editます...ブラウザがぐるぐる回るだけです。そのためmousedown、選択プロセス中にを保持する必要があります。

これを修正するには、を追加しspanてクリックをスパンにバインドし、 ：にselect追加したままにします。.edit

この実用的なフィドルの例を参照してください！

関連するHTML

<tbody>
  <tr><td>xxx</td><td class="edit"><span>yyy</span></td></tr>
  <tr><td>xxx</td><td class="edit"><span>yyy</span></td></tr>
  <tr><td>xxx</td><td class="edit"><span>yyy</span></td></tr>
</tbody>

jQUERY

$("#my-table td.edit").on("click", "span", function(){
  var $t    = $(this),
      $html = $t.parent(),
      role  = $t.text();
  
  $html.html($("#select-clone").clone(false).removeAttr('id'));
});

2）

選択したオプションテキストをに配置するに.editは、イベントハンドラーをにバインドし、選択したものからchangeを収集する必要があります。HTMLoption

この実用的なフィドルの例を参照してください！

jQuery

$('.edit').on("change", "select", function() {
  var $t2 = $(this),
      val = $(this).find(':selected').html();

  $t2.parent().html(val);
});

3）

ステップ01e02をループさせるには、選択optionした値をにラップして、ユーザーがテキストをクリックしたときにイベントが発生spanし続けるようにする必要があります。click

この実用的なフィドルの例を参照してください！

jQuery

$('.edit').on("change", "select", function() {
  var $t2   = $(this),
      $span = $('<span>'),
      val   = $span.html($(this).find(':selected').html());

  $t2.parent().html(val);
});
于 2012-06-10T22:46:22.607 に答える