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');
 });

上面的代码几乎可以工作，但由于某种原因，如果没有按下鼠标按钮，选择菜单就会关闭。

现在，当Select菜单失去焦点时，我希望触发一个事件，该事件将选择菜单替换为原始文本。我一直在玩模糊（），但没有得到它的工作。当更改选择菜单时，我希望触发一个可以保存数据的事件，然后再次将选择菜单替换为选定选项。

4

1 回答 1

1

1)

要解决您的第一个问题，您需要记住您正在将 a 附加select到带有click事件的元素！因此，每次您click在 上时，您都会在... 上select触发浏览器，这就是为什么您在选择过程中被迫保留的原因。click.editmousedown

要修复它，只需添加一个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>

查询

$("#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)

要让 step 01 e 02 循环，您需要将选定的值包装option到 aspan中，以在用户单击文本时保持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 回答