这是我的代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$('.edit_button').click(function(){
console.log($(this).siblings().text());
modifications($(this));
});
});
function modifications(cell){
var form = '<form> <input type="text" id = "newText" size = "30" value='+cell.siblings().text()+'></form>';
cell.parent('td').append(form).focus();
cell.parent().children('.link').toggle();
$('#newText').keypress(function (e) {
if (e.which == 13) {
console.log("form submitted");
e.preventDefault();
var new_text = cell.parent('td').children('#newText').val();
//Show hyperlink with new value
cell.parent().children('.link').toggle();
cell.parent().children('.link').text(new_text);
//Hide text box
cell.parent().children('.newText').hide();
}
});
}
</script>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Company</th>
<th>E-Mail</th>
</tr>
<tr>
<td>Sergey brin</td>
<td>Google</td>
<td class="email">
<a class = "link" href= "www.gmail.com" > sergey.brin@gmail.com </a>
<button class = "edit_button" type="button" style = "float:right" >Edit !</button>
</td>
</tr>
<tr>
<td>Elon Musk</td>
<td> Amazon </td>
<td class="email">
<a class = "link" href = "www.spacex.com">elon.musk@spacex.com </a>
<button class= "edit_button" type="button" style = "float:right">Edit !</button>
</td>
</tr>
<tr>
<td> Bill Gates </td>
<td> Microsoft </td>
<td class="email">
<a class = "link" href = "www.microsoft.com"> bill.gates@hotmail.com </a>
<button class="edit_button" type="button" style = "float:right">Edit !</button>
</td>
</tr>
</table>
</body>
</html>
问题陈述: 我希望在单击编辑按钮时出现一个文本框，编辑后按 Enter 键时文本框的内容应更改为超链接，否则如果按 Escape 键应恢复超链接的原始内容。
我在这里缺少什么？我什至无法从文本框中获取值。 有人可以和我一起集思广益吗？
最佳答案
这是您的解决方案。
$(function(){
$('table').delegate('.edit_button', 'click', function (e) {
var target = $(this);
var link = target.siblings('.link');
var input;
if (target.siblings('.newText').length === 0) {
target.before('<input type="text" class="newText" size="30" value='+link.text()+'>');
link.toggle();
input = target.siblings('.newText');
input.focus();
input.keypress(function (e) {
if (e.which === 13) {
e.preventDefault();
link.text(input.val()).toggle();
input.remove();
} else if (e.which === 0) {
e.preventDefault();
link.toggle();
input.remove();
}
});
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
<th>Company</th>
<th>E-Mail</th>
</tr>
<tr>
<td>Sergey brin</td>
<td>Google</td>
<td class="email">
<a class="link" href="www.gmail.com" > sergey.brin@gmail.com </a>
<button class="edit_button" type="button" style="float:right" >Edit !</button>
</td>
</tr>
<tr>
<td>Elon Musk</td>
<td> Amazon </td>
<td class="email">
<a class="link" href="www.spacex.com">elon.musk@spacex.com </a>
<button class="edit_button" type="button" style="float:right">Edit !</button>
</td>
</tr>
<tr>
<td> Bill Gates </td>
<td> Microsoft </td>
<td class="email">
<a class = "link" href = "www.microsoft.com"> bill.gates@hotmail.com </a>
<button class="edit_button" type="button" style = "float:right">Edit !</button>
</td>
</tr>
</table>关于javascript - 使用 jquery 内联编辑超链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31459306/