jquery实现打开窗口返回值

网页上常常有这种效果，当你的鼠标移入一个输入框时会弹出一个对话框让你选择填入该对话框的值，现在我们用Jquery简单的实现这种效果。可惜博客园不支持上传附件，唉！

 

代码

   
   

    
    
    
    <
    
    div
    
    >
    
    get value:
    
    <
    
    input 
    
    type
    
    ="text"
    
     name
    
    ="inputname"
    
     id
    
    ="inputname"
    
    />
    
    
        
    
    <
    
    div 
    
    id
    
    ="getvalue"
    
     style
    
    ="display:none;"
    
    >
    
    
            
    
    <
    
    div 
    
    id
    
    ="tl"
    
    ></
    
    div
    
    ><
    
    div 
    
    id
    
    ="tr"
    
    ></
    
    div
    
    >
    
    
            
    
    <
    
    table 
    
    style
    
    ="border:1px solid #ccc ;width:500px;text-align:left;"
    
    >
    
    
                
    
    <
    
    thead
    
    >
    
    
                    
    
    <
    
    tr
    
    >
    
    
                    
    
    <
    
    th
    
    >
    
    number
    
    </
    
    th
    
    >
    
    
                    
    
    <
    
    th
    
    >
    
    last name
    
    </
    
    th
    
    >
    
    
                    
    
    <
    
    th
    
    >
    
    first name
    
    </
    
    th
    
    >
    
    
                    
    
    </
    
    tr
    
    >
    
    
                
    
    </
    
    thead
    
    >
    
    
                
    
    <
    
    tbody
    
    >
    
    
                
    
    <
    
    tr
    
    >
    
    
                    
    
    <
    
    td
    
    >
    
    2
    
    </
    
    td
    
    >
    
    
                    
    
    <
    
    td
    
    >
    
    xing
    
    </
    
    td
    
    >
    
    
                    
    
    <
    
    td
    
    >
    
    ge
    
    </
    
    td
    
    >
    
    
                
    
    </
    
    tr
    
    >
    
    
                
    
    <
    
    tr
    
    >
    
    
                    
    
    <
    
    td
    
    >
    
    3
    
    </
    
    td
    
    >
    
    
                    
    
    <
    
    td
    
    >
    
    xingad
    
    </
    
    td
    
    >
    
    
                    
    
    <
    
    td
    
    >
    
    gead
    
    </
    
    td
    
    >
    
    
                
    
    </
    
    tr
    
    >
    
    
                
    
    <
    
    tr
    
    >
    
    
                    
    
    <
    
    td
    
    >
    
    4
    
    </
    
    td
    
    >
    
    
                    
    
    <
    
    td
    
    >
    
    xingxing
    
    </
    
    td
    
    >
    
    
                    
    
    <
    
    td
    
    >
    
    ge
    
    </
    
    td
    
    >
    
    
                
    
    </
    
    tr
    
    >
    
    
                
    
    </
    
    tbody
    
    >
    
    
                
    
    <
    
    tfoot
    
    >
    
    
                    
    
    <
    
    tr
    
    >
    
    
                        
    
    <
    
    td
    
    >
    
    number
    
    </
    
    td
    
    >
    
    
                        
    
    <
    
    td
    
    >
    
    last name
    
    </
    
    td
    
    >
    
    
                        
    
    <
    
    td
    
    >
    
    first name
    
    </
    
    td
    
    >
    
    
                    
    
    </
    
    tr
    
    >
    
    
                
    
    </
    
    tfoot
    
    >
    
    
            
    
    </
    
    table
    
    >
    
    
        
    
    </
    
    div
    
    >
    
    
        
    
    </
    
    div
    
    >
   
   

 

接下来我们写点JS代码实现这个功能：

 

代码

   
   

    
    
    
    $(document).ready(
    
    function
    
    (){
    $(
    
    "
    
    #inputname
    
    "
    
    ).focus(
    
    function
    
    (){
        
    
    //
    
    alert('focus');
    
    

    
            $(
    
    "
    
    #getvalue
    
    "
    
    ).css(
    
    "
    
    display
    
    "
    
    ,
    
    '
    
    block
    
    '
    
    )
    
    //
    
    显示表格
    
    

    
                        .addClass(
    
    '
    
    hover
    
    '
    
    )
                    .find(
    
    '
    
    table tr
    
    '
    
    ).dblclick(
    
    function
    
    (){
    
    //
    
    双击表格tr
    
    

    
                            
    
    var
    
     text
    
    =
    
    $(
    
    this
    
    ).find(
    
    "
    
    td:eq(0)
    
    "
    
    ).text();
    
    //
    
    获取表格td的第一个的文本值
    
    

    
                            
    
    //
    
    alert($text);
    
    

    
                            $(
    
    "
    
    #getvalue
    
    "
    
    ).css(
    
    '
    
    display
    
    '
    
    ,
    
    '
    
    none
    
    '
    
    );
    
    //
    
    隐藏表格
    
    

    
                            $(
    
    "
    
    #inputname
    
    "
    
    ).val(text);
    
    //
    
    赋值Input
    
    

    
                        });
    });
})

   
   
   
   

   
   

    
    http://www.cnblogs.com/gxll1314/archive/2010/03/03/1677521.html