当点击相应的链接时，如何使用 jQuery 将标签更改为文本字段？

Question

我有一个表格，我需要当单击特定范围时，它之前的范围从标签更改为文本字段。下表：

<table>
    <tbody>
        <tr>
            <td><span class="spanName">John Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
        <tr>
            <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
    </tbody>
</table>

现在假设单击 John Doe 后的“更改”，其之前的范围必须从“John Doe”更改为文本字段（这也适用于所有其他字段）。如果单击 John Doe 的 alter span，结果将如下所示：

<table>
    <tbody>
        <tr>
            <td><span class="spanName"><input type="text" /></span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
        <tr>
            <td><span class="spanName">Jayne Doe</span>&nbsp;<span class="spanDefaultName">Alter</span></td>
        </tr>
    </tbody>
</table>

如果可能，并且我认为可以通过使用 :next 或类似的东西来使用 jQuery，我必须仅使用类而不是 ID 来实现此目的。

另外，如果您认为我应该使用锚而不是跨度，请告诉我。我使用跨度只是因为 jQuery 中的 :next 和 :previous 功能。

任何帮助将不胜感激

Answer 1

这将使您在单击时获得文本框，允许您调整文本，然后在模糊时将跨度设置回输入的新文本。 示例

JavaScript

$('.spanName').click(function() {
    var $elem = $(this);
    var text = $elem.text();
    var input = $('<input value="' + text + '" />')
    $elem.text('').append(input);
    input.select();

    input.blur(function() {
        var text = input.val();
        input.parent().text(text);
        input.remove();
    });
});

HTML

<table>
    <tbody>
        <tr>
            <td><span class="spanName">John Doe</span> <span class="spanDefaultName">Alter</span></td>
        </tr>
        <tr>
            <td><span class="spanName">Jayne Doe</span> <span class="spanDefaultName">Alter</span></td>
        </tr>
    </tbody>
</table>

Answer 2

像这样的东西：

$(".spanDefaultName").click(function() {
    var text = $(this).prev("span").text();
    $(this).prev("span").hide();
    $(this).before('<input value="' + text + '" />');
    $(this).unbind("click");
});

演示： http://jsfiddle.net/karim79/MWwyR/4/

Answer 3

这怎么样？ $('span.clickable').click(function () { $(this).prevAll('span').last().html('<输入...>'); } ）；

Answer 4

我认为这应该满足您的要求

    $('span.spanDefaultName').click(function() {

       val = $(this).prev().text();
       $(this).prev().remove();
       $(this).parent().prepend($('<input type="text" value="' + val + '" />'));

    });

虽然如果您要提交此表单，您的输入将需要一个名称属性

Answer 5

您应该能够通过执行以下操作来得到它：

$('.spanDefaultName').click(function() {
    if($(this).prev().find(':input').length) {
        var text = $(this).prev().val();
        $(this).prev().text(text);
    } else {
        var text = $(this).prev().text();
        $(this).prev().html('<input type="text" value="' + text + '"/>');
    }
});

这将从跨度中获取文本，创建一个文本框，然后将文本插入其中。它将适用于页面上的所有实例。

编辑：根据更新的请求，这将根据所需范围内是否有输入元素进行切换。如果是这样，它将使用文本框的值恢复为文本。