您的位置:首页 > Web前端 > JQuery

jquery即点即改

2016-07-07 10:58 344 查看
[html] view
plain copy

 





<table border="">    

    <th>编号</th>    

    <th>用户名</th>    

    <th>密码</th>    

    <?php foreach($i as $v){ ?>    

    <tr>    

        <td><?php echo $v['id']?></td>    

        <td value="<?php echo $v['id']?>"><span class="name"><?php echo $v['name']?></span></td>    

        <td><?php echo $v['pwd']?></td>    

    </tr>    

    <?php } ?>    

</table>    

[html] view
plain copy

<script>  

  

    $(document).on('click','span',function(){  

         old_val=$(this).html();  

        $(this).parent().html("<input type=\'text\' value="+old_val+">");  

        $('input').focus();  

    })  

  

    $(document).on('blur','input',function(){  

        var obj=$(this);  

        var id=$(this).parent().attr('value'); //获取要修改内容的id  

        var val=$(this).val(); //获取修改后的值  

        $.ajax({  

            type:'post',  

            url:'index.php/welcome/upd_pro',  

            data:{  

                id:id,  

                val:val  

            },  

            success:function(msg){  

                if(msg == 1){  

                    $('td[value='+id+']').parent().html("<span class='name'>"+val+"</span>")  

                }else{  

                    obj.parent().html("<span class='name'>"+old_val+"</span>")  

                }  

  

            }  

        })  

    })  

  

/***************************************  

<pre name="code" class="html">$(document).on('click','span',function(){  

    var old_val=$(this).html();  

    $(this).parent().html("<input type=\'text\' value="+old_val+">");  

    $('input').focus();  

  

    $('input').blur(function(){  

        var obj=$(this);  

        var id=$(this).parent().attr('value'); //获取要修改内容的id  

        var val=$(this).val(); //获取修改后的值  

        $.ajax({  

            type:'post',  

            url:'index.php/welcome/upd_pro',  

            data:{  

                id:id,  

                val:val  

            },  

            success:function(msg){  

                if(msg == 1){  

                    obj.parent().html("<span class='name'>"+val+"</span>")  

                }else{  

                    obj.parent().html("<span class='name'>"+old_val+"</span>")  

                }  

  

            }  

        })  

    })  

  

})  

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: