Tengo una tabla de configuración como la siguiente:

<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>

Yo, básicamente, quiere que el ancla para cambiar a un cuadro de texto que contiene el href cuando el vínculo haga clic en, a continuación se presentan los resultados del ejemplo:

<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>

Cuando otro de anclaje de la etiqueta o haga clic en el cuadro de texto está fuera de foco, cualquier cuadro de texto de volver a ser un ancla y la hace clic en uno de los cambios a un cuadro de texto.

InformationsquelleAutor RailsSon | 2009-10-22

3 Comentarios

  1. 13

    Este es un comienzo. Agregar un evento click a los enlaces y un desenfoque evento a las entradas utilizando 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() + "'>");
      });
    });

    Que se dice, para este tipo de cosas prefiero no eliminar elementos del DOM como este. En lugar de eso prefieren ocultar/mostrar elementos, según corresponda. Por ejemplo:

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

    con:

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

    y

    $(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");
      });
    });
    • esta es una solución elegante
    • No es necesario enfocar el campo de entrada cuando se hace clic? De modo que la fuerza del método de desenfoque a ser llamado si algo se hace clic en…
    • agregar el corchete de cierre en el código ( $(this).replaceWith(«<input type=’text’ value='» + $(this).attr(«href») + «‘>»); //cierre de corchete angular de agregado) de la línea 4
    • FYI: El jQuery live() función de está en desuso. El uso de la on() función de su lugar.
  2. 2
    $(".url").click(function()
    {
    var link = $(this).find("a");
    link.hide();
    $(this).append("<input id'txtUrl' value" + link.attr("href") + " />");
    });
    • No Se anexe que la entrada a todos los «.url»?
  3. 0

    Algo como:

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

    totalmente probados, por supuesto

Dejar respuesta

Please enter your comment!
Please enter your name here