Javascript 使用jquery内联编辑超链接_Javascript_Jquery_Html

Javascript 使用jquery内联编辑超链接

javascript jquery html

Javascript 使用jquery内联编辑超链接,javascript,jquery,html,Javascript,Jquery,Html,这是我的密码： <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.l

这是我的密码：

<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>


$（函数（）{
$（'.edit_按钮'）。单击（函数（）{
console.log（$（this.sibbines（）.text（））；
修改（$（本））；
});            
});
功能修改（单元）{
var形式=“”；
cell.parent（'td'）.append（form.focus（）；
cell.parent（）.children（'.link'）.toggle（）；
$（'#newText'）。按键（功能（e）{
如果（e.which==13）{
控制台日志（“提交的表格”）；
e、 预防默认值（）；
var new#u text=cell.parent（'td'）.children（'newText'）.val（）；
//显示具有新值的超链接
cell.parent（）.children（'.link'）.toggle（）；
cell.parent（）.children（'.link'）.text（新文本）；
//隐藏文本框
cell.parent（）.children（'.newText'）.hide（）；
}
});   
}
名称
单位
电子邮件
谢尔盖·布林
谷歌
编辑
埃隆麝香
亚马逊
编辑
比尔盖茨
微软
编辑

问题陈述： 我希望在单击“编辑”按钮时显示一个文本框，在按下enter键进行编辑后，文本框的内容应更改为超链接，否则，如果按下Escape，则应恢复超链接的原始内容

我错过了什么？我甚至无法从文本框中获取值。

有人能和我一起集思广益吗？

你做了一些无效的东西，甚至是

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>

并作出以下更改：

$('table').delegate('#newText', 'keypress', function (e) {
    // rest of code
}

这是你的解决方案

$（函数（）{
$（'table'）。委托（'。编辑按钮，'click'，函数（e）{
var目标=$（此）；
var-link=target.sides（'.link'）；
var输入；
if（target.sides（'.newText'）。长度==0）{
目标。在（“”）之前；
link.toggle（）；
输入=target.sides（'.newText'）；
input.focus（）；
输入。按键（功能（e）{
如果（e.which==13）{
e、 预防默认值（）；
link.text（input.val（））.toggle（）；
input.remove（）；
}else if（例如，which==0）{
e、 预防默认值（）；
link.toggle（）；
input.remove（）；
}
});
}
});
});

名称
单位
电子邮件
谢尔盖·布林
谷歌
编辑
埃隆麝香
亚马逊
编辑
比尔盖茨
微软
编辑
您应该真正修改HTML的基础知识。您的
在内。修正。正确的HTML:@shrinivas我已经修改了HTML
$('table').delegate('#newText', 'keypress', function (e) {
    // rest of code
}