Question

这是我的代码

<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，则应恢复超链接的原始内容。

我在这里缺少的，我甚至无法从文本框中获取值。有人可以和我一起头脑风暴吗？

Answer 1

你做了一些无效的事情，甚至是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
}

Answer 2

这是您的解决方案。

＆＃13;

$(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();
                }
            });
        }
    });
});

＆＃13;

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

＆＃13;

内联使用jquery编辑超链接

2 个答案: