jquery 实现双击编辑并保存

Jesse
2013-12-11 19:47:00
3529

最近在做一个数据修改的例子，一个个点开修改很麻烦，于是就想到ecshop后台里的只需单击就以编辑了，在网上查阅资料，就想到双击修改，失去鼠标焦点后post执行

HTML:

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>jquery双击编辑并保持</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <td>标题</td>
                <td>时间</td>
                <td>地点</td>
            </tr>
            <thead>
                <tbody>
                    <tr>
                        <td id="11">第一个</td>
                        <td id="22">2013</td>
                        <td id="33">北京</td>
                    </tr>
                    <tr>
                        <td id="44">第二个</td>
                        <td id="55">2013</td>
                        <td id="66">上海</td>
                    </tr>
                    <tr>
                        <td id="77">第三个</td>
                        <td id="88">2013</td>
                        <td id="99">广州</td>
                    </tr>
                </tbody>
            </thead>
        </thead>
    </table>
</body>
<script src="jquery-2.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $(".test").dblclick(function(){
            var id = $(this).attr("id");
            var inval = $(this).html(); //获得td里的html内容

            //把td里的html内容变为input框，并赋值
            $(this).html("<input type='text' size='8' id='edit"+id+"' value='"+inval+"'>");

            //input框获得焦点，以及失去焦点后的处理
            $("#edit"+id).focus().on("blur",function() {
                var editval = $(this).val();                //获得input框中的值
                $(this).parent().html(editval);                //把得到的值赋给input框父节点的html

                //post表单提交
                $.post("post.php",{id:id,val:editval},function(data) {
                //alert(data);
                })
            })
        })
    })
</script>
</html>