Question

我无法在以下代码中获取文本框的更新值。

<html>
    <head>
        <script src='jquery.js'></script>
        <script type='text/javascript'>
            $(document).ready(function(){
                $("#edit").click(function(){
                    if($(this).html() == "Edit"){
                        $(this).html("Update");
                        var my_val = $(this).parents().find("#name").html();
                        var new_html = "<input type='text' value='" + my_val + "' />";
                        $(this).parents().find("#name").html(new_html);
                        return false;
                    }else{
                        if($(this).html() == "Update"){
                            var txt_box = $(this).parents().find("#name").html();
                            alert($(txt_box).val());
                        }
                    }
                });

            });
        </script>
    </head>
    <body>
        <table id='test_table'>
            <tr>
                <td id='name'>My Name</td>
                <td><a href='#' id='edit'>Edit</a></td>
            </tr>
        </table>
    </body>
</html>

Answer 1

删除此行中的.html()：

var txt_box = $(this).parents().find("#name").html();

警报中的$（）包装器。所以你有：

var txt_box = $(this).parents().find("#name");
alert(txt_box.val());

Answer 2

更改

   var txt_box = $(this).parents().find("#name").html();

到

var txt_box = $(this).parents().find("#name > input");

那是因为第一个总是会导致：

<input type="text" value="My Name">

Answer 3

使用像jquery-in-place-editor这样的jquery插件可能会更好更简单（参见demo here）？

在jquery内联编辑中获取更新值？

3 个答案: