JQuery 更改输入文本

Question

我的表格设置如下:

<table>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page1.html" />
    </td>
  </tr>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page2.html" />
    </td>
  </tr>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page3.html" />
    </td>
  </tr>
</table>

我基本上希望在单击链接时将 anchor 更改为包含 href 的文本框，以下是示例结果:

<table>
  <tr>
    <td class="url">
       <input type="text" value="http://www.domainname.com/page1.html" />
    </td>
  </tr>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page2.html" />
    </td>
  </tr>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page3.html" />
    </td>
  </tr>
</table>

当单击另一个 anchor 标记或文本框未获得焦点时，任何文本框都会恢复为 anchor 标记，并且单击的文本框将更改为文本框。

Answer 1

这是一个开始。使用 live() 将单击事件添加到链接，并将模糊事件添加到输入.

$(function() {
  $("td.url a").live("click", function() {
    var parent = $(this).parent();
    $(this).replaceWith("<input type='text' value='" + $(this).attr("href") + "'>"); //closing angle bracket added
    parent.children(":text").focus();
    return false;
  });
  $("td.url :text").live("blur", function() {
    $(this).replaceWith("<a href='" + $(this).val() + "'>");
  });
});

话虽这么说，对于这种事情我不喜欢像这样从 DOM 中删除元素。相反，我更喜欢根据需要隐藏/显示元素。例如:

<table>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page1.html" />
       <input type="text">
    </td>
  </tr>
</table>

与:

td.url input { display: none; }
td.edit a { display: none; }
td.edit input { display: block; }

和

$(function() {
  $("td.url a").click(function() {
    var a = $(this);
    a.next().val(a.attr("href")).focus();
    a.parent().addClass("edit");
    return false;
  });
  $("td.url :text").blur(function() {
    var txt = $(this);
    txt.prev().attr("href", txt.val());
    txt.parent().removeClass("edit");
  });
});