我有一个表格，我需要当单击特定范围时，它之前的范围从标签更改为文本字段。下表如下:
<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>
现在假设单击了“John Doe”之后的“更改”，其之前的范围必须从“John Doe”更改为文本字段(这也适用于所有其他字段)。如果单击 John Doe 的更改范围，结果将如下所示:
<table>
<tbody>
<tr>
<td><span class="spanName"><input type="text" /></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>
如果可能的话，并且我认为可以通过使用 :next 或类似的东西来使用 jQuery，我必须仅使用类而不是 ID 来实现它。
此外，如果您认为我应该使用 anchor 而不是跨度，请告诉我。我使用跨度只是因为 jQuery 中的 :next 和 :previous 功能。
任何帮助将不胜感激
最佳答案
这将为您提供单击时的文本框，允许您调整文本，然后在模糊时将跨度设置回输入的新文本。 <强> Example
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>
关于javascript - 当点击相应的链接时，如何使用 jQuery 将标签更改为文本字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4399799/