JQ----即点即改

<td style="width: 250px">
	<span class="span">{
    
    {
    
    $val->rolename}}</span>
	<input type="text" class="data" where="{
    
    {
      
      $val->id}}">
</td>
// 进行即点即改
            //  隐藏输入框
            $(".data").hide();
            //  当点击用户名时，出现单个用户名，并且让光标落到后面
            $(".span").click(function () {
    
    
                $(this).hide();
                $(this).next('input').show()
                $(this).next('input').val($(this).html()).focus();
            })
            //  失焦事件
            $(".data").blur(function () {
    
    
                //  获取当前要修改的ID
                var id = $(this).attr('where');
                //  获取输入框中的新值
                var val = $(this).val();
                //  获取输入框中的旧值
                var oldval = $(this).prev().html();
                //  判断值是否改动？
                if (val == oldval || val==''){
    
    
                    $(this).hide()
                    $(this).prev().show()
                    return false
                }else {
    
    
                    //进行修改发送ajax
                    $.ajax({
    
    
                        url : "{
    
    {route('admin.user.updateName')}}",
                        type : "PUT",
                        data : {
    
    id,_token,val}
                    }).then((res)=>{
    
    
                        if(res.code == 200){
    
    
                            layer.msg('修改成功', {
    
    icon: 1,time:2000},()=>{
    
    
                                $(this).prev().html(val)
                                $(this).hide()
                                $(this).prev().show()
                            });
                        }else{
    
    
                            layer.msg('修改失败', {
    
    icon: 2,time:2000},()=>{
    
    
                                $(this).hide()
                                $(this).prev().show()
                            });
                        }
                    })
                }
            })