مسج تغيير النص لإدخال

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>

وأريد أساسا مرساة للتغيير إلى مربع نص يحتوي على أ 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>

عند العلامة مرساة أخرى هي انقر أو مربع النص هو غير مركزة، أي مربعات النص تعود إلى كونه مرساة والنقر التغييرات واحد إلى مربع النص.

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

Answer 2

$(".url").click(function()
{
var link = $(this).find("a");
link.hide();
$(this).append("<input id'txtUrl' value" + link.attr("href") + " />");
});

Answer 3

وشيء من هذا القبيل:

$("td.url a").bind("click", function(){
    var clickevent = arguments.callee;
    $("td.url input").trigger("blur");
    $(this).replaceWith("<input type='text' value='"+$(this).attr("href")+"'/>");
    $("td.url input").bind("blur", function(){
        $(this).replaceWith("<a href='"+$(this).val()+"' />");
        $("td.url a").bind("click", clickevent);
    });
});

ولم تختبر تماما، بالطبع