jquery的即点即改

最新推荐文章于 2021-03-23 20:43:23 发布

天天study

最新推荐文章于 2021-03-23 20:43:23 发布

阅读量319

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/matiantian666/article/details/51727717

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

<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>")
                }

            }
        })
    })

})