2

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

<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 之后的 Alter，它必须从 John Doe 更改为文本字段之前的跨度（这也适用于所有其他字段）。如果单击 John Doe 的更改跨度，结果将如下所示：

<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 功能。

任何帮助将不胜感激

4

5 回答 5

4

这将在单击时为您提供文本框，允许您调整文本，然后在模糊时使用输入的新文本设置跨度。例子

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>&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>
于 2010-12-09T15:42:15.113 回答
1

像这样的东西：

$(".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/

于 2010-12-09T15:26:08.620 回答
0

这个怎么样？$('span.clickable').click(function () { $(this).prevAll('span').last().html('<input ....>'); });

于 2010-12-09T15:26:40.977 回答
0

您应该能够通过以下方式得到它的样子：

$('.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 + '"/>');
    }
});

这将使文本超出范围，创建一个文本框，并将您的文本插入其中。它适用于页面上的所有 this 实例。

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

于 2010-12-09T15:26:48.493 回答
0

我认为这应该做你想做的

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

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

    });

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

于 2010-12-09T15:31:39.947 回答