[英]Inline edit a hyperlink using jquery
这是我的代码:
<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>
问题说明:我希望在点击编辑按钮时出现一个文本框,在按下回车键编辑后,文本框的内容应更改为超链接,否则如果按下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>
你做了一些无效的事情,甚至是HTML
部分! HTML
文件的有效结构是:
<!DOCTYPE html>
<html>
<head>
<!-- you may load some css and/or js files here -->
</head>
<body>
<!-- here you can add your html elements, such as `table`, `div`, and so on -->
</body>
</html>
所以,你首先需要解决这个问题,作为第一份工作!
也试试.prev()
,而不是siblings()
,如下所示:
cell.prev().text();
并进行以下更改:
$('table').delegate('#newText', 'keypress', function (e) {
// rest of code
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.