使用 jquery 內聯編輯超鏈接

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

這是您的解決方案。

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

Answer 2

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

使用 jquery 內聯編輯超鏈接

問題描述

2 個解決方案

解決方案1
1 已采納 2015-07-17 03:44:55

解決方案2
0 2015-07-16 17:10:30

使用 jquery 內聯編輯超鏈接

問題描述

2 個解決方案

解決方案1 1 已采納 2015-07-17 03:44:55

解決方案2 0 2015-07-16 17:10:30

解決方案1
1 已采納 2015-07-17 03:44:55

解決方案2
0 2015-07-16 17:10:30